当前位置:Gxlcms > html代码 > Sass入门教程_html/css_WEB-ITnose

Sass入门教程_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:23人阅读

CSS 令人不爽

写 css 很麻烦,又不好维护,总之令人不爽。


CSS 预处理器

于是就为 css 加入编程元素,这就是“css预处理器”。


Sass vs Less

最广为人知的 css 预处理器是 Sass 和 Less。众多 css 预处理器中谁最优秀,最简短的回答:Sass。


Sass 简介

Sass 是由 Ruby 写的,但与 Ruby 的语法没有一丁点关系,所以学 Sass 不用学 Ruby,只是需要安装 Ruby 而已。

Sass 是 CSS3 的扩展,是 CSS3 的超集。


安装 Ruby

已说过,Sass 是由 Ruby 编写的,所以先安装 Ruby,不同操作系统安装方法不同,Ruby 官网下载地址: https://www.ruby-lang.org/en/documentation/installation/。

检测 Ruby 是否安装成功:

ruby -v

或者

ruby --version


安装Sass

输入如下命令:

gem install sass

检测是否安装成功:

sass -v

sass --version

升级 Sass 版本:

gem update sass


Sass 语法

两种语法格式

一种是以 .sass 作为扩展名,这种语法对空格敏感,不用花括号,不用分号:

#div    width: 100px    height: 200px

另一种是以 .scss 作为扩展名,又出现了熟悉的花括号和分号:

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

选择哪一种语法?当然是后者。


编译风格

共有四种编译风格:

(1)nested:嵌套缩进的css代码,它是默认值。
(2)expanded:没有缩进的、扩展的css代码。
(3)compact:简洁格式的css代码。
(4)compressed:压缩后的css代码。

sass 001.scss 001.css --style compressed

sass --style compressed 001.scss 001.css

如果只是使用:

sass 001.scss

则会将编译后的 .css 输出显示在命令行。

变量

变量名以 $ 符号开头,可包含所有可用作 CSS 类名的字符,包括下划线和中划线。

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

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

如果变量需要嵌在字符串中,则变量需要放在 #{} 中:

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

如果变量定义在 CSS 规则块之内,则只在此规则块之内有效。

变量名中不区分的中划线和下划线,即 $link_color 与 $link-color 相同:

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


嵌套

选择器嵌套:

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

编译后:

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

父选择器标识符 & :

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

编译后:

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

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

编译后:

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

群组选择器的嵌套:

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

编译后:

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

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

编译后:

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

组合选择器:> + ~,无需使用父选择器标识符 & ;可以用在外层选择器的后边,也可以用在里层选择器的前边:

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

编译后:

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

属性也可以嵌套,嵌套规则是:用 ":" 把属性名从中划线 "-" 的地方断开,在根属性后边添加一个冒号,紧跟一个 "{}" 块,把子属性部分写在 "{}"块中:

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

编译后:

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

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

编译后:

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


@import

Sass 重写了 @import。原生的 CSS 执行到 @import 时才会去下载其导入的 CSS 文件。Sass 的 @import 在生成 CSS 文件时就把相关文件导入进来。

使用 Sass 的 @import 不需要指定导入文件的扩展名,即可以省略 .scss 或 .sass。

Sass 允许 @import 写在 CSS 规则内。

Sass 有一个文件命名约定,对于不需要生成对应的独立 CSS 文件,只作为 @import 编写的 Sass 文件,被称为局部文件,局部文件名以下划线开头,导入局部文件时,可以省略该下划线。

以下三种情况会使用 CSS 原生 @import:

(1)被导入的文件名以 .css 结尾;

(2)被导入的文件名是一个 URL 地址,如 http://www.xxx.com/style/xxx.css;

(3)被导入的文件名是 CSS 的 url() 值。

!default

!default 用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值:

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

编译后:

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


注释

CSS 标准格式的注释是: /* ... */。

Sass还有一个注释,叫静默注释:// 注释内容。这种注释不会出现在生成的 CSS 文件中。


混合器

变量是为了重用某个值,混合器则可以重用大段样式。

混合器使用 @mixin 标识符定义,使用 @include 引用这个混合器。

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

编译后:

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

在混合器中也可以使用 CSS 规则:

@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;}

编译后:

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

可以给混合器传参,参数可以有默认值:

@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);}

编译后:

#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

人气教程排行