1. Nesting
Sass allows one set of CSS styles to be nested inside another set of styles, and the inner style has its outer selector as the parent selector. The nesting feature avoids duplicating parent selectors and makes complex CSS structures easier to manage.
1. Selector nesting
#app{
color:while;
// 嵌套
.content{
color:red;
}
}
Compilation result:
#app {
color: while; }
#app .content {
color: red; }
2. Parent selector &
When nesting CSS rules, sometimes it is necessary to directly use the parent selector of the outer layer of the nested rule. You can use & to represent the parent selector of the outer layer of the nested rule.
#app{
color:while;
// 父级选择器
&.chird{
background:#f0f0f0;
}
}
Compilation result:
#app {
color: while; }
#app.chird {
background: #f0f0f0; }
3. Attribute nesting
Some CSS properties follow the same namespace (namespace), such as font-family, font-size, font-weight all use font as the namespace of the property. In order to facilitate the management of such properties, but also to avoid repeated typing, Sass allows properties to be nested in namespaces, for example:
#app{
color:while;
// 嵌套
.content{
color:red;
}
// 父级选择器
&.chird{
background:#f0f0f0;
// 属性嵌套
font:{
family:test;
size:30px;
weight:bold;
}
}
}
Compilation result:
#app {
color: while; }
#app .content {
color: red; }
#app.chird {
background: #f0f0f0;
font-family: test;
font-size: 30px;
font-weight: bold; }
2. Comments
Sass supports standard CSS multi-line comments /* */and single-line comments //. The former will be completely output to the compiled CSS file, while the latter will not. For example:
/*
多行注释
*/
//单行注释
Compilation result:
/*
多行注释
*/
3. Variable $
1. Use variables
$var : 16px;
.fontSize {
font-size: $var;
}
Compilation result:
.fontSize {
font-size: 16px;
}
2. Data type
SassScript supports 6 main data types:
Number , 1, 2, 13, 10px
string , quoted string and unquoted string, "foo", 'bar', baz
color , blue, #04a3f9, rgba(255,0,0,0.5)
boolean , true, false
empty value , null
array (list), use space or comma as separator, 1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, equivalent to JavaScript object, (key1: value1, key2: value2 )
SassScript also supports other CSS property values, such as Unicode character sets, or !important declarations. However, Sass does not treat these attribute values specially and treats them as unquoted strings.
4. Operation
All data types support the equality operation == or !=, and each data type also has its own supported operation methods.
1. Number operations
SassScript supports addition, subtraction, multiplication, division, and rounding of numbers (+, -, *, /, %), converting values between different units if necessary. The relational operations <, >, <=, >= can also be used for numeric operations.
$number : 12px;
p{
width: $number * 2 ;
}
p{
width: $number / 2 ;
}
Compilation result:
p {
width: 24px; }
p {
width: 6px; }
2. Color value calculation
The calculation of color values is performed in segments, that is, the values of red, green, and blue are calculated separately. For example, #010203 + #040506, then calculate 01 + 04 = 05, 02 + 05 = 07, 03 + 06 = 09, and the result is #050709
.color1{
color: #010120 + #234234;
}
.color2{
color: #010120 * 2;
}
.color3{
color: rgba(250, 0, 0, 0.75) + rgba(5, 255, 0, 0.75);
}
Compilation result:
.color1 {
color: #244354; }
.color2 {
color: #020240; }
.color3 {
color: rgba(255, 255, 0, 0.75); }
Note: If the color value contains an alpha channel (either rgba or hsla color values), they must have equal alpha values to perform the operation, because arithmetic operations do not operate on alpha values.
3. String operation
+can be used to concatenate strings
Note: If a quoted string (located to the left of +) is connected to an unquoted string, the operation result is quoted. On the contrary, if an unquoted string (located to the left of +) is connected to a quoted string, the operation result is without quotes.
.string1:before{
font-family: icon + font ;
content: "带引号字符串" + 不带引号字符串;
}
.string2:before{
font-family: icon + font ;
content: 不带引号字符串 + "带引号字符串";
}
Compilation result:
.string1:before {
font-family: iconfont;
content: "带引号字符串不带引号字符串"; }
.string2:before {
font-family: iconfont;
content: 不带引号字符串带引号字符串; }
4. Boolean operations
SassScript supports Boolean and or and not operations.
.bool1:before{
content: $bool and false;
}
.bool2:before{
content: $bool or false;
}
.bool3:before{
content: not $bool;
}
Compilation result:
.bool1:before {
content: false; }
.bool2:before {
content: true; }
.bool3:before {
content: false; }
The operation results here actually have no big meaning. They are just for observing the operation results. Boolean operations are generally used in @if later.
5. Array operations
Arrays do not support any operation methods and can only be controlled using list functions.
6. Parentheses
Parentheses can be used to affect the order of operations:
//圆括号
p{
width:12px * (4 - 2);
}
Compilation result:
p {
width: 24px; }
Five, function
SassScript defines a variety of functions, some of which can even be called through ordinary CSS statements:
(hsl is one of SassScript's built-in functions)
// sassScript 函数
div{
color: hsl(0 , 80%, 50%);
}
Compilation result:
div {
color: #e61a1a; }
Sass functions allow the use of keyword arguments. The above example can also be written as:
div{
color: hsl($hue: 0, $saturation:80%, $lightness:50%);
}
6. Interpolation statement#{}
#{}Variables can be used in selectors, property names, or property values via interpolation statements:
$selectName:'.foo';
$attrName:'width';
$content: "content内容";
#{
$selectName}:before {
#{
$attrName}:12px;
content: "#{
$content}";
}
Compilation result:
.foo:before {
width: 12px;
content: "content内容"; }
7. !default
You can add at the end of the variable to assign !defaulta value to a variable that has not been assigned a value through the !default declaration. At this time, if the variable has been assigned a value, it will not be reassigned, but if the variable has not been assigned a value, it will be assigned a new value.
// !default
$content1:'初始赋值';
$content1: "!default 赋值" !default;
.content_value1:before{
content: $content1;
}
$content2:null;//null 将会被视为未赋值,从而!default为其赋值
$content2: "!default 赋值" !default;
.content_value2:before{
content: $content2;
}
Compilation result:
.content_value1:before {
content: "初始赋值"; }
.content_value2:before {
content: "!default 赋值"; }
8. @import
Sass extends the functionality of @import to allow it to import SCSS or Sass files. The imported files will be merged and compiled into the same CSS file. In addition, variables or mixins contained in the imported files can be used in the imported files.
Normally, @import looks for a Sass file and imports it, but in the following case, @import only acts as a normal CSS statement and does not import any Sass files.
(1) The file extension is .css;
(2) The file name starts with http://;
(3) The file name is url();
(4) @import contains media queries.
Usage example:
//@import 语法
@import "test2.scss";
Sass allows multiple files to be imported at the same time, for example, import test2.scss and test3.scss two files at the same time:
// 导入多文件
@import "test2.scss", "test3.scss";
Importing files can also use #{ } interpolation statements, but instead of dynamically importing Sass files through variables, it can only be used in the url() import method of CSS:
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{
$family}");
Partials
If you need to import a SCSS or Sass file but don't want it to be compiled into CSS, just add an underscore before the file name. This will tell Sass not to compile these files, but there is no need to add an underscore in the import statement.
For example, if you name the file _colors.scss, the _colours.css file will not be compiled.
@import "colors";
In the above example, the _colors.scss file is actually imported.
Note: Files with the same name with and without underline cannot exist at the same time. The underlined file will be ignored.
Nested @import
In most cases, @import is generally used at the outermost layer of the file (not within nesting rules). In fact, @import can also be nested into CSS styles or @media. The effect is the same as usual usage, just import like this Styles can only appear in nested layers.
test2.scss:
.test2{
content: '这是.test2';
}
Import:
// 嵌套导入
#main {
@import "test2.scss";
}
Compilation result:
#main .test2 {
content: '这是.test2'; }
Note: You cannot nest @import inside mixins or control directives.
9. @media
The @media directive in Sass works the same as in CSS, with a little extra functionality: it allows nesting within CSS rules. If @media is nested inside a CSS rule, when compiling, @media will be compiled to the outermost level of the file, including the nested parent selector. This feature makes @media easier to use without reusing selectors and disrupting the CSS writing process.
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
Compilation result:
.sidebar {
width: 300px; }
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
@mediaIt is allowed to be nested with each other. When compiling, Sass will automatically add and
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
Compilation result:
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
@mediaYou can also use SassScript (such as variables, functions, and operators) instead of the name or value of the condition
10. @extend
This is a common situation when designing web pages: one element uses exactly the same style as another element, but additional styles are added. Usually, two classes are defined for elements in HTML, a general style and a special style.
// extend 样式继承
.item{
width:100%;
background:#ffffff;
line-height:40px;
}
.light_item{
//继承上面.item的样式
@extend .item ;//父级并行使用.item的样式
// 特殊样式（其他样式）
background:#f0f0f0;
}
Compilation result:
.item, .light_item {
width: 100%;
background: #ffffff;
line-height: 40px; }
.light_item {
background: #f0f0f0; }
multiple inheritance
The same selector can be extended to multiple selectors, and the properties it contains will be inherited by all extended selectors:
.error{
color:red;
}
.success{
color:green;
}
.msg{
@extend .error;
@extend .success;
color: #555555;
}
Compilation result:
.error, .msg {
color: red; }
.success, .msg {
color: green; }
.msg {
color: #555555; }
Continuation
After one selector is extended to a second selector, you can continue to extend the second selector to a third selector, for example:
// 延续 继承
.g_father{
color:#555555;
}
.father{
@extend .g_father;
background:#ffffff;
}
.child{
@extend .father;
border:1px soild #000000;
}
Compilation result:
.g_father, .father, .child {
color: #555555; }
.father, .child {
background: #ffffff; }
.child {
border: 1px soild #000000; }
selector column
It is currently not possible to extend selector sequences (Selector Sequences), such as .foo .bar or .foo + .bar, to other elements. However, other elements can be extended to selector sequences:
#fake-links .link {
@extend a;
}
a {
color: blue;
&:hover {
text-decoration: underline;
}
}
Compilation result:
a, #fake-links .link {
color: blue; }
a:hover, #fake-links .link:hover {
text-decoration: underline; }
@extend-Only selector
Sometimes, it is necessary to define a set of styles that is not used for a certain element, but only used through the @extend directive. Especially when making a Sass style library, I hope that Sass can ignore unused styles.
If you use ordinary CSS rules, you will end up compiling a lot of unused styles, and it is easy to conflict with other style names. Therefore, Sass introduced "placeholder selectors" (placeholder selectors), which look a lot like ordinary IDs. or class selector, just # or . is replaced by %. Can be used like class or id selectors, when used alone they are not compiled into the CSS file.
// ％占位符
#content a%extreme {
//%占位符选择器将不会被编译，只接受 extend
color:bule;
font-size:16px;
}
.notice{
@extend %extreme;
}
Compilation result:
#content a.notice {
color: bule;
font-size: 16px; }
11. @at-root
The @at-root directive causes one or more style rules to be emitted at the root of the document, rather than nested under their parent selector. It can be used with a single inline selector:
// at-root 指令
.parent:before{
content:"parent 内容";
@at-root .chird:before{
content:"chird 内容";
}
}
Compilation result:
.parent:before {
content: "parent 内容"; }
.chird:before {
content: "chird 内容"; }
Contains multiple selectors:
.parent:before{
content:"parent 内容";
@at-root{
.chird:before{
content:"chird 内容";
}
.chird2{
color:red;
}
.chird3{
background:red;
}
}
}
Compilation result:
.parent:before {
content: "parent 内容"; }
.chird:before {
content: "chird 内容"; }
.chird2 {
color: red; }
.chird3 {
background: red; }
@at-root (without: …) and @at-root (with: …)
By default, @at-root only removes selectors. However, it is also possible to use @at-root to move out of nested directives, such as @media. For example:
@media print {
.page {
width: 8in;
@at-root (without: media) {
color: red;
}
}
}
Compilation result:
@media print {
.page {
width: 8in;
}
}
.page {
color: red;
}
12. @debug, @warn, @error
@debug
The @debug directive prints the value of a SassScript expression to the standard error output stream. It is very useful for debugging Sass files with complex SassScript. For example:
@debug 10em + 12em;
Compilation result:
Line 1 DEBUG: 22em
@warn
The @warn directive prints the value of a SassScript expression to the standard error output stream. It's very useful for those small bugs that need to warn users about deprecation or existence. There are two main differences between @warn and @debug:
1. You can turn off warnings with the --quiet command line option or the :quiet Sass option.
2. The stylesheet trace will be printed along with the message so that users who are warned can see where their styles caused the warning.
Usage example:
@mixin adjust-location($x, $y) {
@if unitless($x) {
@warn "Assuming #{
$x} to be in pixels";
$x: 1px * $x;
}
@if unitless($y) {
@warn "Assuming #{
$y} to be in pixels";
$y: 1px * $y;
}
position: relative; left: $x; top: $y;
}
@error
The @error directive throws the value of the SassScript expression as a fatal error, including a nice stack trace. It is useful for validating parameters of mixins and functions. For example:
@mixin adjust-location($x, $y) {
@if unitless($x) {
@error "$x may not be unitless, was #{
$x}.";
}
@if unitless($y) {
@error "$y may not be unitless, was #{
$y}.";
}
position: relative; left: $x; top: $y;
}
Thirteen, @if
When the return value of the expression of @if is not false or null, the condition is established, and the code inside {} is output:
p {
@if 1 + 1 == 2 {
border: 1px solid; }
@if 5 < 3 {
border: 2px dotted; }
@if null {
border: 3px double; }
}
Compilation result:
p {
border: 1px solid; }
An @if statement can be followed by multiple @else if statements, or a single @else statement. If the @if statement fails, Sass will execute the @else if statements one by one. If all of them fail, the @else statement will be executed last. For example:
p{
$num : 3;
@if $num == 1 {
color:red;
}
@else if $num == 2 {
background:red;
}
@else{
border:red;
}
}
Compilation result:
p {
border: red; }
14. @for
The @for directive can repeatedly output the format within a limited range, changing the output result as required (the value of the variable) each time. This instruction contains two formats: @for $var from <start> through <end>or, @for $var from <start> to <end>the difference lies in the meaning of through and to: when using through, the condition range includes the values of <start>and <end>, while when using to, the condition range only includes the <start>value of and does not include <end>the value of . Also, $var can be any variable, such as $i; <start>and <end>must be an integer value.
// @for
@for $i from 1 through 3 {
.item-#{
$i} {
width: 2em * $i;
}
}
Compilation result:
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
15. @each
The format of the @each directive is $var in <list>that $var can be any variable name, such as $length or $name, but a series of values, that is, a list of values.
@each applies the variable $var to each item in the list of values and outputs the result, for example:
// each
$list : ['one','two','there','four'];
@each $i in $list {
.item-#{
$i}:before {
content: $i;
}
}
Compilation result:
.item-one:before {
content: "one"; }
.item-two:before {
content: "two"; }
.item-there:before {
content: "there"; }
.item-four:before {
content: "four"; }
16. @while
The @while directive repeats the output format until the expression returns false. This allows for more complex loops than @for, but is rarely used. For example:
// @while
$i : 4;
@while $i>0 {
.while_#{
$i}{
width: 1em * $i;
$i: $i - 1;
}
}
Compilation result:
.while_4 {
width: 4em; }
.while_3 {
width: 3em; }
.while_2 {
width: 2em; }
.while_1 {
width: 1em; }
17. mixin mixing instructions
Mixin instructions (Mixin) are used to define reusable styles, avoiding the use of meaningless classes, such as .float-left. Mixed directives can contain all CSS rules, most Sass rules, and even introduce variables through parameter functions to output diverse styles.
1. Define the mixing instruction @mixin
The usage of the mixed instruction is to add the name and style after @mixin. For example, the mixed named large-text is defined by the following code:
@mixin big_text{
font:{
size:22px;
weight:bold;
}
color:#555;
}
Mixins also need to contain selectors and attributes, and can even refer to parent selectors with &:
@mixin pos_center{
position:absolute;
transform:translate(-50%,-50%);
top:50%;
left:50%;
&:hover{
color:red;
}
}
2. Reference mixed style @include
Use the @include directive to refer to the mixin style, the format is to add the mixin name after it, and the required parameters (optional):
.block{
@include pos_center;
}
Compilation result:
.block {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%; }
.block:hover {
color: red; }
Mixed styles can also be referenced at the outermost level, properties are not defined directly, and parent selectors cannot be used.
@mixin silly-links {
a {
color: blue;
background-color: red;
}
}
@include silly-links;
Compilation result:
a {
color: blue;
background-color: red; }
Mixed styles can also contain other mixed styles, such as
@mixin compound {
@include highlighted-background;
@include header-text;
}
@mixin highlighted-background {
background-color: #fc0; }
@mixin header-text {
font-size: 20px; }
3. Mix with ginseng
Parameters are used to set variables for styles in mixed instructions and assign values. When defining a mixed command, according to the variable format, separate the parameters with commas, and write the parameters into parentheses. When quoting instructions, according to the order of the parameters, write the assigned values into parentheses:
@mixin big_text2($size,$weight){
font:{
size:$size;
weight:$weight;
}
color:#555;
}
.p_big_text2{
@include big_text2(24px,bold)
}
Compilation result:
.p_big_text2 {
font-size: 24px;
font-weight: bold;
color: #555; }
Set default value
Mixed instructions can also use the method of assigning values to variables to set default values for parameters. Then, when this instruction is referenced, if no value is assigned to the parameter, the default value is automatically used:
@mixin big_text3($size:20px,$weight:400){
font:{
size:$size;
weight:$weight;
}
color:#555;
}
.p_big_text3{
@include big_text3
}
Compilation result:
.p_big_text3 {
font-size: 20px;
font-weight: 400;
color: #555; }
Keyword parameters
Mixins can also take keyword arguments:
.p_big_text3{
@include big_text3($weight:bold)
}
Compilation result:
.p_big_text3 {
font-size: 20px;
font-weight: bold;
color: #555; }
adventitious ginseng
Sometimes, it's not sure how many parameters a blending command needs to take, for example a blending command for box-shadow doesn't know how many 'shadow's will be used. At this time, you can use the parameter variable (variable parameter) ... declaration (written at the end of the parameter) to tell Sass to treat these parameters as a list of values:
@mixin big_text4($font...){
font: $font;
color:#555;
}
.p_big_text4{
@include big_text4(20px 400)
}
Compilation result:
.p_big_text4 {
font: 20px 400;
color: #555; }
4. Import content into mixed styles
When referencing a mixed style, you can first import a piece of code into the mixing directive, and then output the mixed style. The additional imported part will appear in the @content mark:
@mixin apply(){
#app{
color:red;
@content;
}
}
#page{
@include apply{
.container{
width:100%;
}
}
}
Compilation result:
#page #app {
color: red; }
#page #app .container {
width: 100%; }
For ease of writing, @mixin can also be represented by =, and @include can be represented by +. This writing method is only applicable to the syntax of previous versions of Sass3 (sass syntax format)
Usage example:
=apply
#app
color:red;
@content
#page
+apply
.container
width:100%;
18. @function function instruction
Sass supports custom functions and can be used in any attribute value or Sass script. Like mixins, you can also pass several global variables to the function as parameters. A function can contain multiple statements and needs to call @return to output the result. :
$width : 400;
$multiple: 2;
@function app_width($width,$multiple){
@return $width * $multiple px;
}
#app{
width: app_width($width,$multiple);
}
Compilation result:
#app {
width: 800 px; }