Sass introductory tutorial_html/css_WEB-ITnose

CSS is unpleasant

Writing CSS is very troublesome and difficult to maintain. In short, it is unpleasant.

CSS preprocessor

So we added programming elements to css, which is the "css preprocessor".

Sass vs Less

The most well-known css preprocessors are Sass and Less. Which of the many css preprocessors is the best? Shortest answer: Sass.

Sass Introduction

Sass is written in Ruby, but it has nothing to do with Ruby’s syntax, so you don’t need to learn Ruby to learn Sass, you just need to install it Just Ruby.

Sass is an extension of CSS3 and a superset of CSS3.

Installing Ruby

As I said, Sass is written in Ruby, so install Ruby first. The installation methods are different for different operating systems. Ruby official website download address : https://www.ruby-lang.org/en/documentation/installation/.

Check whether Ruby is installed successfully:

ruby -v

or

ruby --version

Install Sass

Enter the following command:

gem install sass

Check whether the installation is successful:

sass -v

or

sass --version

Upgrade Sass version:

gem update sass

Sass syntax

Two syntax formats

One is with .sass as the extension. This syntax is sensitive to spaces and does not require curly braces or semicolons:

#div    width: 100px    height: 200px

The other With .scss as the extension, the familiar curly braces and semicolons appear again:

#div {    width: 100px;    height: 200px;    }

Which syntax to choose? Of course it's the latter.

Compilation style

There are four compilation styles:

(1) nested: nested indented css code, it is default value.
(2) expanded: no indented, expanded css code.
(3) compact: css code in a concise format.
(4) compressed: compressed css code.

sass 001.scss 001.css --style compressed

or

sass --style compressed 001.scss 001.css

If you just use:

sass 001.scss

the compiled .css output will be displayed on the command line.

Variables

Variable names start with the $ symbol and can contain all characters that can be used as CSS class names, including underscores and underscores.

$width: 100px;#div {    width: $width;    height: 200px;    }

$width: 2px;#div {    border : $width solid red;}

If the variable needs to be embedded in the string, the variable needs to be placed in #{}:

$dir: top;#div {    border-#{$dir} : 2px solid red;}

If the variable is defined within a CSS rule block, it is only valid within this rule block.

Indistinguishable underscores and underscores in variable names, that is, $link_color is the same as $link-color:

$link-color: red;#div {    color: $link_color;}

Nested

Selector nesting:

#div {    h1 {        color: red;    }    article {        p {            color: green        }    }}

After compilation:

#div h1 {  color: red; }#div article p {  color: green; }

Parent selector identifier&:

a {    color: red;    &:hover {        color: green;    }}

After compilation:

a {  color: red; }  a:hover {    color: green; }

 

a {    color: red;    p & {        color: green;    }}

After compilation:

a {  color: red; }  p a {    color: green; }

Nesting of group selectors:

aritcle {    h1, h2, h3, h4 {color: #ccc}}

After compilation:

aritcle h1, aritcle h2, aritcle h3, aritcle h4 {  color: #ccc; }

aritcle, aside {    h1, h2 {color: #ccc}}

Compiled:

aritcle h1, aritcle h2, aside h1, aside h2 {  color: #ccc; }

Combined selector: > ~, no need to use the parent selector identifier &; can be used in the outer layer After the selector, it can also be used in front of the inner selector:

aritcle {    > section {color: red}    + section {color: green}    ~ section {color: blue}    dl > {        dt {color: #ccc}        dd {color: #666}    }}

After compilation:

aritcle > section {  color: red; }aritcle + section {  color: green; }aritcle ~ section {  color: blue; }aritcle dl > dt {  color: #ccc; }aritcle dl > dd {  color: #666; }

Attributes can also be nested. The nesting rule is: use " :" Break the property name at the dash "-", add a colon after the root property, followed by a "{}" block, and write the sub-property part in the "{}" block:

nav {    margin: {        top: 10px;        left: 5px;    }}

After compilation:

nav {  margin-top: 10px;  margin-left: 5px; }

nav {    margin: 15px {        top: 10px;        left: 5px;    }}

After compilation:

nav {  margin: 15px;    margin-top: 10px;    margin-left: 5px; }

@import

Sass rewrites @import. Native CSS will download the imported CSS file only when @import is executed. Sass's @import imports related files when generating CSS files.

Using Sass’s @import does not require specifying the extension of the imported file, that is, you can omit .scss or .sass.

Sass allows @import to be written within CSS rules.

Sass has a file naming convention. For Sass files that do not need to generate corresponding independent CSS files and are only written as @import, they are called partial files. The partial file name starts with an underscore. When importing partial files, The underscore can be omitted.

CSS native @import will be used in the following three situations:

(1) The imported file name ends with .css;

(2) The imported file name Is a URL address, such as http://www.xxx.com/style/xxx.css;

(3) The imported file name is the url() value of CSS.

!default

!default is used for variables, meaning: if this variable is declared and assigned a value, then use its declared value, otherwise use this default value:

$width: 10px;$width: 20px !default;$height: 10px;$height: 20px;#div {    width: $width;    height: $height;}

Compiled:

#div {  width: 10px;  height: 20px; }

Comments

CSS standard format comments are: /* ... */.

Sass also has a comment called silent comment: // Comment content. Such comments will not appear in the generated CSS file.

Mixer

Variables are for reusing a certain value, and mixers can reuse large sections of styles.

Mixers are defined using the @mixin identifier and @include is used to reference this mixer.

@mixin rounded-corners {       -moz-border-radiux: 5px;    -webkit-border-radius: 5px;            border-radiux: 5px;}#div {    color: red;    @include rounded-corners;}

After compilation:

#div {  color: red;  -moz-border-radiux: 5px;  -webkit-border-radius: 5px;  border-radiux: 5px; }

CSS rules can also be used in the mixer:

@mixin rounded-corners {       -moz-border-radiux: 5px;    -webkit-border-radius: 5px;            border-radiux: 5px;    a {        color: red;    }    & span {        color: blue;    }}#div {    color: red;    @include rounded-corners;}

After compilation:

#div {  color: red;  -moz-border-radiux: 5px;  -webkit-border-radius: 5px;  border-radiux: 5px; }  #div a {    color: red; }  #div span {    color: blue; }

You can pass parameters to the mixer, and the parameters can have default values:

@mixin rounded-corners($size, $color, $color2: red) {       -moz-border-radiux: $size;    -webkit-border-radius: $size;            border-radiux: $size;    a {        color: $color;    }    & span {        color: $color2;    }}#div {    color: red;    @include rounded-corners(10px, green);}

After compilation:

#div {  color: red;  -moz-border-radiux: 10px;  -webkit-border-radius: 10px;  border-radiux: 10px; }  #div a {    color: green; }  #div span {    color: red; }

     

     

选择器继承

选择器继承是指一个选择器可以继承另一个选择器定义的样式，继承使用 @extend 。

.error {    color: red;    font-size: 16px;}.syntax {    background-color: blue;    @extend .error;}

编译后：

.error, .syntax {  color: red;  font-size: 16px; }.syntax {  background-color: blue; }

     
     

表达式

只要能放在属性右边的都可以称为表达式，如一个简单的值 bold 或 5px，也可以是值的列表 2px solid #ccc。

表达式中不仅能包含变量，还可以包含数学运算符。

     

数据类型

CSS 属性或 Sass 变量中的每个值都有一个类型，类型不同，动作方式也不同，Sass 能理解所有的这些类型。

     

字符串

包括 无引号字符串 和 有引号字符串，bold、auto、center 属性于无引号字符串，"microsoft yahei" 属于有引号字符串。

字符串连接运算符是："+"。如果两个字符串都是无引号字符串，则结果也是无引号字符串；如果两个字符串都是有引号字符串，则结果也是有引号字符串；如果一个是有引号字符串，一个是无引号字符串，则结果与是否有引号取决于左边的字符串。

div + p    divp"div" + p    "divp"div + "p"    divp

     
     

数值

数值包括两部分：实际的数值及单位。

当对带有单位的数值做乘法和除法运算时，单位也一起做乘法和除法运算，如：

5em*4px    20em*px16px/1em    16px/em

这有什么用呢？可以用在单位转换，如 16px/em 代表 1em 是 16px。

对带单位的数值做加法或减法运算时，Sass 会自动转换，否则如果不能转换则出错。      
还可以使用取模运算：%。

除法 “/” 有些特殊，因为 "/" 即可以表示除法，也可以表示一个普通斜杠，以下三个情况满足任何一个都会使用除法：

（1）在 / 的任意一边使用一个变量；

（2）整个值被小括号包围；

（2）该值被用作其他算术表达式的一部分。

$var: 1px; $var/2px;(1px/2px);1 + 1px/2px;

     
     

颜色

不论最初的颜色值以何种形式表示，Sass 内部会同时使用 RGB 和 HSL 来表示颜色。

     

列表

列表是一个数值的序列，用来表示 border、font等属性，如 2px solid #ccc，也可以是以逗号隔开。

算术运算符对列表没什么用。

布尔值

布尔值只有两种：true 和 false。

布尔值不使用算术运算符，它们有自己的操作符：and、or 和 not。

返回布尔值的操作符：

<<=>>===

对于小于和大于，只用于数字；对于 == 则可以用于全部类型。      
     
     

函数

和 CSS 函数不同，Sass 函数可以使用关键字变量，这意味着不是通过参数顺序来指明参数，而是可以显示地命名几个或者所有的变量：

rgb($green: 127, $blue: 127, $red: 255)

数值函数

（1）abs($number)    取$number的绝对值；

（2）ceil($number)    $number向上取整；

（3）floor(($number)    $number向下取整；

（4）round($number)    $number四舍五入；

（5）percentage($number)    将小数$number转换为百分数；

（6）comparable($number1, $number2)    $number1和$number2是否能比较；

（7）unit($number)    返回$number的单位；

（8）unitless($number)    返回$number是否没单位。

     

颜色函数

（1）alpha($color)/opacity($color)    返回$color的alpha通道；
（2）blue($color)    返回$color的蓝色通道；
（3）green($color)    返回$color的绿色通道；
（4）red($color)    返回$color的红色通道；
（5）hue($color)    返回$color的色度属性；
（6）lightness($color)    返回$color的亮度属性；
（7）saturation($color)    返回$color的饱和度属性；
（8）complement($color)    返回$color色环与与$color的互补；
（9）grayscale($color)    返回$color的灰度版本；
（10）invert($color)    返回$color的反相版本；
（11）mix($color1, $color2, [$weight])    按照$weight的百分比将$color1和$color2混合在一起；
（12）$adjust($color, ...)    按照给定的的颜色成分调整$color的各个属性；
（13）$scale($color, ...)    按照百分比调整$color的各个属性；
（14）$set($color, ...)    将$color的各个属性设置为固定值。
     

     

列表函数

（1）nth(a b c, $n)    返回列表第$n个值；
（2）join($list1, $list2, [$separator])    将两个列表连接起来，如果没有$separator，则分隔符以第一个为准；
（3）length($list)    返回$list列表中项目的个数。
     

     

其他函数

（1）type-of($value)    返回一个无符号字符串，代表$value的类型，可以是：number、string、color、bool、list；
（2）if($condition, $if-true, $if-false)    就像三元运算符，如果$condition为true，则返回$if-true，否则返回$if-false。

     

自定义函数

使用 @function 指令自定义函数，每个 @function 必须返回一个结果。

@function width($w) {    @return $w * 100px;}

     

     

控制指令

@for

@for 指令用来计数，有两种语法：

（1）@for $i from to

（2）@for $i from through

@for $i from 1 to 5 {    .box-#{$i} {        width: 100px * $i;    }}

编译后：

.box-1 {  width: 100px; }.box-2 {  width: 200px; }.box-3 {  width: 300px; }.box-4 {  width: 400px; }

@for $i from 1 through 5 {    .box-#{$i} {        width: 100px * $i;    }}

编译后：

.box-1 {  width: 100px; }.box-2 {  width: 200px; }.box-3 {  width: 300px; }.box-4 {  width: 400px; }.box-5 {  width: 500px; }

可以看出这两种语法的差异在于要不要包括最后一个数字。

@each

@each 指令多次重复一个样式块。

@each $item in home, about, archive {    nav .#{$item} {        background-image: url(/images/#{$item}.png);    }}

编译后：

nav .home {  background-image: url(/images/home.png); }nav .about {  background-image: url(/images/about.png); }nav .archive {  background-image: url(/images/archive.png); }

@each 指令中的列表可以用逗号分开，也可以用空格分开。        
       
       

@if @else

@if 指令用来控制一个样式块是否使用，其中也可以与 @else if 及 @else指令配合使用。

$flag: 2;.nav {    @if $flag == 1 {        width: 100px;    } @else if $flag == 2 {        width: 200px;    } @else {        width: 300px;    }}

编译后：

.nav {  width: 200px; }

       

参考

（1）《Sass与Compass实战》

（2）  http://www.ruanyifeng.com/blog/2012/06/sass.html