SASS usage guide_html/css_WEB-ITnose

Just looking at it is useless, you will forget it all after a while, so let’s record it.

First of all, windows is still inseparable from me, so the environment is still windows..

1. SASS environment installation Configuration

SASS is written in ruby, so if you want to compile sass into a css file, you need to configure it with a ruby ​​environment.

Just download and install rubyinstaller for windows. Be sure to configure the environment variables.

For example, E:Ruby22-x64bin is configured into the system environment variable path

cmd command line execution ruby ​​-v If correct, the installation configuration is correct

The next step is to use gem to install sass for us

The general approach is to directly

gem install sass

But many times the report is wrong, maybe it is domestic The network is too bad and was blocked.. You can see the specific information through the -V parameter

Generally speaking, the Taobao team provides a lot of mirrors, go take a look~

Use simple commands to switch sources

gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/gem sources -l*** CURRENT SOURCES ***https://ruby.taobao.org# 请确保只有 ruby.taobao.org gem install rails

Sass is installed successfully, let’s experience it first~

Create a new test.scss file in the sass directory, write a few sentences, and execute it directly.

You can use sass test.scss test.css to compile scss files directly into css files

2. SASS usage:

As in the test.scss file in the above example, I can define the style of the compiled css code.

* nested: Nested indented css code, it is the default value.

* expanded: Unindented, expanded css code.

* compact: css code in a concise format.

* compressed: compressed css code.

You can also directly define changes in the monitoring file, modify the scss file, and the css will be updated simultaneously

Next, let’s talk about the syntax of sass

1. Like css, directly define

div{width:50px;}

2. Use variables. Variables have $ identifiers . If you want to define a default variable value, just add !default at the end.

If the variable is to be placed in a string, use #{} to include it. You can use the calculation function

$width: 500px;$height: 300px !default;$side: right;div{     border-#{$side}-width: $width / 5;}  |  |  |div {  border-right-width: 100px;}

3. Nesting. Sass can nest selectors to indicate hierarchical relationships, which looks elegant and neat. If you want to use a parent class, use the ampersand, such as the common a:hover

$width: 500px;div{    width: $width;    .answer a{         &:hover{text-decoration:none;}    }}    |    |    |div {  width: 500px;}div .answer a:hover {  text-decoration: none;}

4. Mixins. Similar to defining a macro/function, and then calling

// *.scss$width: 500px;@mixin right($color: '#0f0'){     font-weight: bold;    color: $color;}div{    width: $width;    .answer{         @include right();    }}//---------------------------------------// *.cssdiv {  width: 500px;}div .answer {  font-weight: bold;  color: "#0f0";}

5. Import other scss or css files @import, import scss The file will be automatically compiled and expanded. If the css is imported,

//test.scss$width: 500px;div{    width: $width;    .answer a{         &:hover{text-decoration:none;}    }}@import './test1.css';@import './test1.scss';p{width: $width / 10;}//test1.cssp.new{    color: red;}//test1.scss$width: 200px;#nav{     width: $width;}//最后，test.css  可以看到，$width变量的值已经更新@import url(./test1.css);div {  width: 500px;}div .answer a:hover {  text-decoration: none;}#nav {  width: 200px;}p {  width: 20px;}

6. Inherit/Extend using @extend

// *.scss$width: 100px;.block{     color: #333;    border-left: 1px;}.block-1{     @extend .block;    width: $width / 2; }.block-2{     @extend .block-1;    background-color: green;}//  *.css.block, .block-1, .block-2 {  color: #333;  border-left: 1px;}.block-1, .block-2 {  width: 50px;}.block-2 {  background-color: green;}

7. Color function, sass has many built-in color functions , such as brightening, darkening, color gradient, etc.

For example:

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) / / #808080
complement(#cc3) // #33c

More color functions

8. Other less commonly used methods

1] Variables can also have multiple values: similar to an array

// *.scss$px : 1px 2px 3px 4px;div{     border-left: nth($px,2);}// *.cssdiv {  border-left: 2px;}

2] You can use map to do key-value relationships using @each Traversal (similar to PHP syntax)

// *.scss$headings : (h1: 12px,h2:13px,h3:14px);@each $header,$size in $headings{     #{$header}{         font-size: $size;    }}// *.cssh1 {  font-size: 12px;}h2 {  font-size: 13px;}h3 {  font-size: 14px;}

3] Break out of selector nesting @at-root But it should be rarely used, if you want to break out of media nesting, such as @media .block-1{}, select media|all

for type. The syntax is @at-root (without: type). There are four types: all (all), rule (regular css, default), media (media), support (support)

// *.scss.block-1{     border-left:1px;    .flw{         color: red;        @at-root{             .today{                 font-size: 14px;            }        }    }    @at-root .tomo{         font-size: 12px;    }}// *.css.block-1 {  border-left: 1px;}.block-1 .flw {  color: red;}.today {  font-size: 14px;}.tomo {  font-size: 12px;}

4] Conditional judgment and loop, etc.

// *.scss$width: 25px;.block-5{     width: 50px;}// 现在不包含4，如果是froms 1 through 4 ,就会包含4@for $i from 1 to 4{     .block-#{$i}{         @if $i % 2 == 0 { width: $width;}        @else {width: 50px;}    }}// *.css.block-5 {  width: 50px;}.block-1 {  width: 50px;}.block-2 {  width: 25px;}.block-3 {  width: 50px;}

5] Of course, You can also define a function and then call ~

increase the width gradually. This css is more and more like programming..

// *.scss$width: 25px;.block-5{     width: 50px;}@function inc($num){     @return $num + 1;}@for $i from 1 through 4{     .block-#{$i}{         @if $i % 2 == 0 {             $width: inc($width);            width: $width;        }        @else {width: 50px;}    }}// *.css.block-5 {  width: 50px;}.block-1 {  width: 50px;}.block-2 {  width: 26px;}.block-3 {  width: 50px;}.block-4 {  width: 27px;}