Sass 使用 sass - 锐客网

sass使用一、sass环境
1.sass简述 Sass是最早的Css预处理语言，采用Ruby语言编写，Sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的Css代码，这一代的Sass也被称为Scss
2.sass特点不能直接在页面中解析，需要使用ruby预先翻译成css文件
Sass功能更加强大，拥有流控语句等
完全兼容 CSS3，在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
3.Sass & Scss Sass和Scss平时都称之为Sass，是同一个东西。区别有两点：

文件后缀 (扩展名) 不同: Sass 以“.sasss”为扩展名，Scss 以“.scss”为扩展名；书写方式 (语法) 不同: Sass 以严格的缩进式语法规则来书写，不带大括号和分号; Scss 的书写方式和 Css 语法非常类似（越来越受欢迎原因之一）。

4.解析Sass 方法一：使用第三方编译工具koala，官网：http://koala-app.com/
方法二：使用vscode插件：easysass，插件配置参考：https://marketplace.visualstu...
二、sass语法
1.变量

Sass 使用美元符号“$”来声明变量。 Sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。 default:降低变量的优先级（备胎）

代码中使用：

$fontSize:60px; $bgColor:blue !default; //全局变量 $bgColor:skyblue; body { font-size: $fontSize; background-color: $bgColor; div{ $bgColor:red; //局部变量 background-color: $bgColor; } }

2.@import

Sass扩展了Css的@import规则，让它能够引入Scss和Sass 文件，合并并输出一个单一的Css文件。被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。

使用：

// test.scss $bgColor:skyblue; // index.scss @import "test"; body { background-color: $bgColor; }

3.嵌套 a.选择器嵌套选择器嵌套，默认是叠加后代选择器

div { h3 { color: red; } }

b.属性嵌套

div { border: {// 注意body 后面有个英文冒号 top:1px solid red; bottom:10px dotted blue; } }

c.伪类嵌套

div { &:hover { background-color: red; } &::after{ content: "after"; } }

4.代码复用 a.混合宏

项目中有几处小样式类似，可以使用变量来统一处理。需要重复使用大段的样式时，变量就无法达到目的了。这个时候就需要混合宏来搞定。 @mixin 用来声明混合宏 @include 用来来调用声明好的混合宏。缺点：混合宏对于复用重复的代码块很方便，但它会生成冗余的代码块，相同代码块不能智能合并。比如在不同的地方调用一个相同的混合宏时。

使用：

@mixin after{// 不带参数 content: "after"; display: block; background-color: red; }@mixin circle($radius:50px,$bgColor:skyblue){// 带参数 width: $radius; height: $radius; border-radius: 50%; background-color: $bgColor; } div{ @include circle(50px,red); &::after{ @include after; } }

b.继承

Sass通过关键词 @extend 来继承已存在的类样式块，实现代码的继承。（可以解决混合宏不能智能合并相同代码的缺点）

.btn{ border: solid 1px #ccc; background-color: white; font-size: 14px; padding: 5px 10px; border-radius: 4px; } .btn-primary{ @extend .btn; background-color: #33b735; // 重写背景颜色 color: white; } .btn-warnning{ @extend .btn; background-color: #da3e3e; color: white; } //===> css /* /* .btn, .btn-primary, .btn-warnning { border: solid 1px #ccc; background-color: white; font-size: 14px; padding: 5px 10px; border-radius: 4px; }

c.占位符

Sass的占位符 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。避免了代码冗余的产生。

%popover{ // 不会保存的css中，因为未继承 background-color: #33b735; }.btn-primary{ // @extend %popover; }

区别总结

占位符独立定义，不调用时不产生任何代码；继承首先有一个基类存在，不管调用不调用，基类的样式都将会编译到 Css 代码中。

区别图示比较：

文章图片

5.特殊变量类型 a.list

List类型的取值,语法nth(list, index),第一个参数表示要取谁的,也就是list类型的变量的名称,第二个表示索引

使用:

div { $div-padding: 1px 5px 10px 20px 30px 40px; padding: { top: nth($div-padding, 1); bottom: nth($div-padding, 4); } }

b.map

Map类型取值,语法map-get(map, key),第一个参数表示要取谁的,也就是map类型的变量的名称,第二个参数表示要取的key。

使用：

div { $color-map: (r:red, g:green, b:blue); color: map-get($color-map, r); }

6.sass运算

对sass中的数值进行计算，除法运算必须加括号，其它运算可以不加，但是建议所有运算都加上括号

使用：

div { border: solid 1px + 3px - 1px red; padding-left: (1000px / 10); padding-top: 10px * 10; }

7.sass分支与循环 a.if语句

@if 指令可以根据条件来处理样式块，条件为true返回一个样式块，false返回另外样式块。除了@if之外，还可以配合@else、@else if使用。

使用：

@mixin show($boolean: true){ @if $boolean { display: block; visibility: visible; }@else{ display: none; visibility: hidden; } }div { @include show(true); }

b.for循环

@for 循环有两种形式： @for $i fromthrough 包括end这个数 @for $i fromto 不包括end这个数循环内使用#{$i}调用当前次循环变量

使用：

ul { width: 500px; border: solid 1px red; li { background-color: red; margin: 10px 0; @for $w from 1 through 10 { &:nth-child(#{$w}) { width: #{$w}0%; } } } }

c.each循环list

@each 循环就是去遍历一个列表，然后从列表中取出对应的值。 @each $var in , $var 是个变量名，返回一个列表值。变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的样式块。

使用：

ul { width: 500px; border: solid 1px red; $author-list: tony tian kevin; @mixin user-imgs { @each $author in $author-list{ .photo-#{$author}{ background-image: url("/imgs/#{$author}.jpg"); } } } .author{ @include user-imgs; } }

编译后的css:

ul { width: 500px; border: solid 1px red; }ul .author .photo-tony { background-image: url("/imgs/tony.jpg"); }ul .author .photo-tian { background-image: url("/imgs/tian.jpg"); }ul .author .photo-kevin { background-image: url("/imgs/kevin.jpg"); }

d.while循环

@while 循环和 @for类似，后面的条件为 true 就会执行，并且会生成不同的样式块，直到表达式值为 false 时停止循环。

使用：

li { background-color: red; $types: 10; $type-width: 20px; @while $types > 0{ &:nth-child(#{$types}) { width: $type-width * $types; $types: $types - 1; } } }

8.函数

Sass自备一系列的函数功能。还可以自定义函数。

可使用的函数：

字符串函数 unquote($string)：删除字符串中的引号； quote($string)：给字符串添加引号； To-upper-case()：将字符串小写字母转换成大写字母； To-lower-case()：将字符串转换成小写字母。数字函数 percentage($value)：将一个不带单位的数转换成百分比值； round($value)：将数值四舍五入，转换成一个最接近的整数； ceil($value)：将大于自己的小数转换成下一位整数； floor($value)：将一个数去除他的小数部分； abs($value)：返回一个数的绝对值； min($numbers…)：找出几个数值之间的最小值； max($numbers…)：找出几个数值之间的最大值； random():获取随机数。列表函数 length($list)：返回一个列表的长度值； nth($list, $n)：返回一个列表中指定的某个标签值 join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表； append($list1, $val, [$separator])：将某个值放在列表的最后； zip($lists…)：将几个列表结合成一个多维的列表； index($list, $value)：返回一个值在列表中的位置值。Introspection 函数 type-of($value)：返回一个值的类型； unit($number)：返回一个值的单位； unitless($number)：判断一个值是否带有单位； comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并。 Opacity函数 alpha($color) /opacity($color)：获取颜色透明度值； rgba($color, $alpha)：改变颜色的透明度值； opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明； transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。Sass Maps的函数 map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。 map-merge($map1,$map2)：将两个 map 合并成一个新的 map。 map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。 map-keys($map)：返回 map 中所有的 key。 map-values($map)：返回 map 中所有的 value。 map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。 keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。Miscellaneous函数（三元函数） if($condition,$if-true,$if-false)：条件成立时，返回的值为 $if-true，否则返回值为$if-false。RGB颜色函数 rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色； rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色； red($color)：从一个颜色中获取其中红色值； green($color)：从一个颜色中获取其中绿色值； blue($color)：从一个颜色中获取其中蓝色值； mix($color-1,$color-2,[$weight])：把两种颜色混合在一起HSL函数 hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色； hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色； hue($color)：从一个颜色中获取色相（hue）值； saturation($color)：从一个颜色中获取饱和度（saturation）值； lightness($color)：从一个颜色中获取亮度（lightness）值； adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色； lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色； darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色； saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色 desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色； grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%); complement($color)：返回一个补充色，相当于adjust-hue($color,180deg); invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

【Sass 使用】使用：