I'm starting to learn Sass and started to check some nesting examples. This is the first one I tried and it's not working:
body {background:#eee;}
.blog .entry {
p{
color:#ff0;
}
}
This is my markup:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.scss">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>
<body class="blog">
<div class="entry">
<h1>My blog post</h1>
<p class="blue">Text <a>link</a></p>
</div><!-- .entry -->
</body>
</html>
The background of the body does change to #eee, but the paragraph stays the same (unless I un-nest it to just p{} ).
First you cannot link an SCSS file just like CSS, you have to compile it to CSS then link the compiled file.
In order to nest properly in SCSS you can do the following:
.blog {
.entry {
p{
color:#ff0;
}
}
}
Your markup and Sass work as you can see here: https://jsfiddle.net/6pa0r48g/
Please check the compiled CSS directly if you are overloading your css rule by another one (i. e. by formatting .blue).
Also this would be more readable:
body {
background: #eee;
}
.blog {
.entry {
p {
color: #ff0;
}
}
}
I would recommend to not go any deeper with your nesting in Sass.
Related
I'm developing a theme-able Polymer web component. As per the custom-style documentation I'm doing the following:
<link rel="import" href="themes/my-element-theme.html">
<style is="custom-style" include="my-element-theme"></style>
However, this is a blunt instrument as it applies the custom theme to all my elements.
One solution is to scope all my theme styles to a CSS class as follows:
:root custom-element.my-element-theme {
font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
}
However, this makes it difficult to apply a custom style to a whole document.
Is there a way to apply custom styles to elements more selectively, say using CSS selectors? What is best practice?
You definitely can use selectors to selectively apply styles to your themeable elements.
It's best to use custom properties and mixins and set their values to targeted elements. Here's an example:
<!DOCTYPE html>
<html>
<head>
<link href="http://polygit.org/components/polymer/polymer.html" rel="import" />
<style is="custom-style">
.container1 my-elem {
--my-elem-span: {
color: red;
}
}
.container2 my-elem {
--my-elem-span: {
color: blue;
}
}
</style>
</head>
<body>
<div class="container1">
<my-elem>hello red</my-elem>
</div>
<div class="container2">
<my-elem>hello blue</my-elem>
</div>
<dom-module id="my-elem">
<template>
<style>
:host { display: block; }
:host span {
#apply(--my-elem-span);
}
</style>
<span><content></content></span>
</template>
<script>
Polymer({
is: 'my-elem'
});
</script>
</dom-module>
</body>
</html>
And you can externalize you styles like you did by placing the css rules in a separate styles module.
<dom-module id="my-elem-theme">
<template>
<style>
.container1 my-elem {
--my-elem-span: {
color: red;
}
}
.container2 my-elem {
--my-elem-span: {
color: blue;
}
}
</style>
</template>
</dom-module>
You then import the way you do:
<link rel="import" href="my-elem-theme.html">
<style is="custom-style" include="my-elem-theme"></style>
I want to change the style of my text that I am embedding with the following markup
<iframe src="URL">
My web page has a limited amount of characters that can be used up very fast with coding in CSS and HTML. The code I'm using the iframe to embed is this:
<style type="text/css">
body {
color: black;
}
h1 {
color: #FFFFFF;
}
h2 {
color: rgb(255,255,255);
}
</style>
<h1>Hello World!</h1>
But when I'm using the following to embed it:
<iframe src="THE RAW URL of the code above" frameBorder="0">
...the whole code is showing, not just the Hello World! in #FFFFFF.
What am I doing wrong here? I would embed just the Hello World! but I know that the CSS on the parent page will not change the style of the source I'm putting in the iframe.
Since the iframe is for embedding HTML documents, you should try using a fully valid HTML as your external file. Something like this:
<!DOCTYPE html>
<html>
<head>
<title>iframe example</title>
</head>
<body>
<style type="text/css">
body {
color: black;
}
h1 {
color: #FFFFFF;
}
h2 {
color: rgb(255,255,255);
}
</style>
<h1>Hello World!</h1>
</body>
</html>
I have an admin page like this:
<div class="admin_page">
<div ng-repeat="user in users">
<div class="my-form-group">
<textarea class="my-form-control">{{user}}</textarea>
</div>
</div>
</div>
This is my main.scss file:
.my-form-group {
#extend .form-group;
.my-form-control {
#extend .form-control
}
}
#import "./admin.scss";
This is my admin.scss:
.admin_page {
textarea {
height: 200px;
}
}
The height of text area is not set.
I tried <textarea class="my-form-control" style="height:200px">{{user}}</textarea> and it works.
Why is the sass version not working?
Edit:
this is my heading:
<!--underscore-->
<script src="/node_modules/underscore/underscore-min.js"></script>
<!--jquery-->
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<!--bootstrap (keep the css although duplicate in bundle, since some may depend on it)-->
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<!--font-awesome-->
<link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css">
<!--summernote-->
<link rel="stylesheet" href="/node_modules/summernote/dist/summernote.css">
<!--<link rel="stylesheet" href="/node_modules/summernote/dist/summernote-bs3.css">-->
<script src="/node_modules/summernote/dist/summernote.min.js"></script>
<!--angular-->
<script src="/node_modules/angular/angular.min.js"></script>
<script src="/node_modules/angular-resource/angular-resource.min.js"></script>
<script src="/node_modules/angular-route/angular-route.min.js"></script>
<script src="/node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<!--angular-summernote-->
<script src="/node_modules/angular-summernote/dist/angular-summernote.min.js"></script>
<!--bundle-->
<script src="/public/script/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="/public/style/bundle.css">
Note that I imported sass version of bootstrap in main.scss, which means inside bundle I have the bootstrap css.
The reason I include the original non-sass version bootstrap is for summernote, which depends on bootstrap.
Edit 2:
I tried the following:
.admin_page {
.my-textarea {
#extend .my-form-control;
height: 500px;
}
}
which has a specificity of 0,0,2,0 (2 classes), it doesnot work
Also this:
.admin_page {
textarea.my-form-control {
height: 200px
}
}
which has a specificity of 0,0,2,1 (2 classes + 1 element), it works. Why is the previous one not working?
It is not problem of sass. It is clearly the problem of specificity.
You just need to mention high specificity css. Since you have a class to the textarea, you can do like this:
textarea.my-form-control{
height: 200px;
}
Read this to understand how specificity works in css.
This code works without bootstrap, but with bootstrap it displays the file input tag.
Help
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.nodisplay
{
display:none;
}
</style>
<input type="file" class="nodisplay">
<div class="nodisplay">lol</div>
You'll need to use the !important modifier to make your code overwrite the bootstrap code. This should work:
.nodisplay
{
display:none !important;
}
This should also work as the input type file is given
.nodisplay, input[type='file']
{
display:none;
}
in the bootstrap.css
input[type='file'] {
display:block;
}
Is it possible to inline a class definition of CSS inside an xhtml file?
I mean, to put someting like:
p.first{ color: blue; }
p.second{ color: red; }
Inside my page, not in a separate CSS file.
I think you're trying to put your CSS in the HTML page, not inline.
You can put CSS in an HTML page (usually in the head) by surrounding it in style tags:
<style type="text/css">
p.first{ color: blue; }
p.second{ color: red; }
</style>
Sure, here's an example. However, it is best practice to keep your styles in a separate css file.
<html>
<head>
<title>Classes</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<style type="text/css">
img {
padding:10px;
margin:5px;
border:1px solid #d5d5d5;
}
div.thumb {
float:left;
}
div.caption {
padding-left:5px;
font-size:10px;
}
</style>
</head>
<body>
<div>your page code etc..</div>
</body>
</html>
You can also put css inside the p tag.
<html>
<body>
<p class="first" style="color:blue;"></p>
<p class="second" style="color:red;"></p>
</body>
</html>
The nice thing about CSS is it works in any file not just an HTML,XML file. You just need to define the syle block like this anywhere in the page
<style type="text/css">
<all my styles goes here>
</style>
In HTML and HTML/XHTML, the standard is, you will put this block in the head section. If it is other type of file for example .aspx, or .php, the block still works, even it is not in head block.
Example
<?php
/* mytest.php file */
<style>
<my styles>
</style>
?>
the same is true for ASPX file.
You can also define inline CSS which means CSS goes right in the element tag. The syntax is
<p style="<all my styles>"> My paragraph contain inline CSS</p>
Yes, you can insert CSS styles in the HTML file. For example:
<p>...</p>
<style type="text/css">
p.first { ... }
</style>
<div>...</div>
As you'll find in the literature, it's not considered a good practice though.