scss 常用语法

点击查看 sass 官方文档

---

1.编译

初学可以在atom 中编译

1. 安装命令 gem install sass
2. atom中安装atom-sass ,mac 中“control+option+c”,windows中“Alt + Ctrl + c” 监控修改的样式文件；

在终端通过指令控制

1. sass --watch sass文件夹名：css文件夹名 --style 编译后的格式
2. sass --watch 单个scss文件名称：css文件名称 --style 编译后的格式
3. "1，2"中的文件夹或者文件名称路径不能出错

通过终端输出的4种格式选择：

（1）nested

Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

（2）expanded

Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

（3）compact

Compact 输出方式比起上面两种占用的空间更少，每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

（4）compressed

Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

2.变量

//编译前
$color-white:#fff;

p{
  color: $color-white;
}

//编译后
p {
  color: #fff; }

/*# sourceMappingURL=scss-test.css.map */

3.嵌套

(1) 嵌套普通标签

//编译前
$color-white:#fff;
div{
  height: 100px;
  p{
    color: $color-white;
  }
}

//编译后
div {
  height: 100px; }
  div p {
    color: #fff; }

（2）嵌套伪类:通过"&"实现

//编译前
a {
  color: #fff;
  &:active{
    color: #000;
  }
}

//编译后
a {
  color: #fff; }
  a:active {
    color: #000; }

/*# sourceMappingURL=scss-test.css.map */

(3)在父级嵌套中，使用“&”引用父级

//编译前
.test {
  color: #fff;
  & {
    color:#666;
  }
  & &_ss{
    color: #999;
  }
}

//编译后
.test {
  color: #fff; }
  .test {
    color: #666; }
  .test .test_ss {
    color: #999; }
/*# sourceMappingURL=scss-test.css.map */

(4)嵌套属性

//编译前
div{
  font:{size: 16px;
        weight:400;
        family:sans-serif;
  }
  border:2px solid #999{
    left:4px;
    right:4px;
  }
}

//编译后
div {
  font-size: 16px;
  font-weight: 400;
  font-family: sans-serif;
  border: 2px solid #999;
    border-left: 4px;
    border-right: 4px; }

/*# sourceMappingURL=scss-test.css.map */

4.混合：@mixin 和 @include

1.基础
@mixin 名称 {
...
};

//编译前
@mixin test{
  width:100px;
};
div{
  @include test;
}
//编译后
div {
  width: 100px; }

/*# sourceMappingURL=scss-test.css.map */

2.可以传参数
@mixin 名称 （option1,option2...）{
...
};

@mixin test($width){
  width:100px;
};
div{
  @include test(100px);
}
//编译后
div {
  width: 100px; }

/*# sourceMappingURL=scss-test.css.map */

3.设置参数默认值
@mixin 名称 （option1:value1,option2:value2,option3,option4...）{
...
};

//编译前
@mixin test($width,$height:10px){
  width:100px;
  height:$height;
};
div{
  @include test(100px);
}
//编译后
div {
  width: 100px;
  height: 10px; }
/*# sourceMappingURL=scss-test.css.map */

5.函数(functions)

Sass 函数官网地址

（1）sass自带函数(更多自带方法请查看官网)

//编译前
.div1{
  width: max(10px,20px,40px);
}
.div2{
  height: min(10px,20px,40px);
}
.div3{
  height: ceil(10.1px);
}
.div4{
  height: floor(10.1px);
}

//编译后.div1 {
  width: 40px; }

.div2 {
  height: 10px; }

.div3 {
  height: 11px; }

.div4 {
  height: 10px; }

/*# sourceMappingURL=style.css.map */

(2)自定义函数

语法：
@function 函数名（参数1,参数2）{
...
}

//编译前
@function addWidth($width1,$width2){
  @return $width1+$width2;
}
div{
  width:addWidth(100px,20px);
}

//编译后
div {
  width: 120px; }

/*# sourceMappingURL=scss-test.css.map */

(3)自定义函数取list颜色值

/*!
 * 配置样式
 */
$color_list:("red":"#ff5050","white":"#fff");

/**
 * 获取颜色
 */
@function get_color($key){
    @return map-get($color_list,$key);
};
//使用方法
div{
    color: get_color(red);
}

//编译后
div{
  color:#ff5050;
}

6.继承扩展：@extend

@extend 会继承指定元素的所有样式，包括子元素的所有样式

//编译前
.test1{
  width: 100px;
}
.test1 p{
  color: #999;
}
.test2 {
  @extend .test1;
  height: 10px;
}

//编译后
.test1, .test2 {
  width: 100px; }

//.test2也继承了.test1 的子元素p的样式
.test1 p, .test2 p {
  color: #999; }

.test2 {
  height: 10px; }

/*# sourceMappingURL=scss-test.css.map */

7.导入样式：@import

将多个文件中的样式导入到一个文件，减少http请求次数;
每个需要import的文件称为partials，文件需要以下划线“_”开头，如"_color.scss"，以“_”开头的文件不会编译生产对应的css文件；

//编译前
//_color.scss 文件内容:
.color-blue{
  color: blue;
};
//style.scss 文件内容：
@import 'color';

//编译后
//不生成对应的_color.css

//style.css 文件
.color-blue {
  color: blue; }

/*# sourceMappingURL=style.css.map */

8.注释 ：Comment

(1)多行注释

会出现在编译后的css文件中

/*
 * 多行注释
 */

(2)单行注释

不会出现在编译后的css文件中

//单行注释

(3)多行强制注释

会出现在编译后的css文件中，即使文件压缩也会保留

 /*！
  * 多行强制注释
  */

9.SassScript 支持 6 种主要的数据类型：

数字，1, 2, 13, 10px //"number"
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz//"string"
颜色，blue, #04a3f9, rgba(255,0,0,0.5)//"color"
布尔型，true, false//"bool"
空值，null//"null"
数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif//"list "
maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

image.png

11.基础运算

(1)加：+

//编译前
.div1{
  width: 10px+10px;
}
.div2{
  width: 10px+10;
}

//编译后
.div1 {
  width: 20px; }

.div2 {
  width: 20px; }

/*# sourceMappingURL=style.css.map */

(2)减：-

//编译前
.div1{
  width: 10px-5px;
}
.div2{
  width: 10px-5;
}

//编译后
.div1 {
  width: 5px; }

.div2 {
  width: 5px; }

/*# sourceMappingURL=style.css.map */

(3)乘：*

//编译前
.div1{
  //乘法计算的时候单位只能有一个，下面 10px*1px报错
  width: 10px*1px;
}
.div2{
  width: 10px*2;
}

//编译后
.div1{
  //报错
  width: 10px*px;
}
.div2 {
  width: 20px; }

/*# sourceMappingURL=style.css.map */

(4)除：/

//编译前

.div1{
  //不正确
  width: 10px/2;
}
.div2{
  //不正确
  width: 10px/2px;
}
.div3{
  //不正确
  width: (10px/2px);
}
.div4{
 //正确
  width: (10px/2);
}

//编译后
.div1 {
  width: 10px/2; }

.div2 {
  width: 10px/2px; }

.div3 {
  width: 5; }

.div4 {
  width: 5px; }

/*# sourceMappingURL=style.css.map */

12.插值语句

语法：
#{}

//编译前
$height:10px;
$name:height;
/*
 * @author:#{$name}
 */
.div-#{$name}{
  #{$name}: #{$height};
};

//编译后
/*
 * @author:height
 */
.div-height {
  height: 10px; }

/*# sourceMappingURL=style.css.map */

更多资源请到sass官网查看

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程：https://www.jianshu.com/p/e8197d4d9880

领取方式：
如果需要学习视频，欢迎关注 【编程微刊】微信公众号，回复【领取资源】一键领取以下所有干货资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！

作者：喜欢坑队友的程序员
链接：https://www.jianshu.com/p/a5fd66c8e9ac
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。