scss语法总结

iamaz
285 阅读5分钟

使用方式

手动编译

sass 文件路径
sass 文件路径:输出文件所在路径
sass .\style.scss:../css/style.css 
将style.scss输出成css放到css文件夹下面的syle.css中

自动编译

sass --watch sass:css
监控sass文件夹下面的sass文件

编译输出的css格式

nested 嵌套

compat 静凑

expanded 扩展（常用）

compressed 压缩

scss和sass的区别

Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于Sass。说白了Scss就是Sass的升级版，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能

Sass 和 Scss 其实就是同一种东西，我们平时都称之为 Sass（萨斯），两者之间不同之处主要有以下两点：

1.文件扩展名不同

Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名。

2.语法书写方式不同

Sass 是以严格的缩进式语法规则来书写，不带大括号 {} 和 分号 ；，而 Scss 的语法书写和我们的CSS 语法书写方式非常类似。

变量

//$开头+变量名(可使用-/_)
$primary-color: red;
$primary-border: 1px solid $primary-color;
​
//使用
ul {
    color: $primary-color;
    border: $primary-border;
}

嵌套

.nav {
    ul {
        li {
            
        }
    }
}

嵌套时调用父选择器

在子选择器前面使用&符号

ul {
    li {
        &:hover {
        }
    }
}
​
//结果css
ul li:hover {
    
}

.nav {
    & &-text {
        
    }
}
​
//结果css
.nav .nav-text {
}

属性嵌套

font-family

font-szie

font-weight

font后面加：{}

里面用；分隔

body {
    font: {
        family :Arial;
        size: 16px;
        weight: normal;
    }
}

混合 mixins

@mixin 定义一组样式

@include 使用一组样式

@mixin 名字 (参数1，参数2) {
    //scss/css
}

@mixin alert {
    color: red;
    background-color: red;
    //可使用嵌套
    a {
        color: green;
    }
}
​
.alert-warning {
    @include alert
}
​
//结果css
.alert-warning {
    color: red;
    background-color: red;
}
.alert-warning a {
     color: green;
}

参数

与变量命名规则相同（前面加$）

@mixin alert($text-color, $background) {
    color: $text-color;
    background-color: $background;
    //可使用嵌套
    a {
        color: darken($text-color, 10%); //让颜色加深10%
    }
}
​
.alert-warning {
    @include alert(#eee,red)
}

.alert-info {
  @include alert($background:#ccc,$text-color:red)  //可不按顺序
}

继承

让一个选择器去继承另一个选择器的所有样式

@extend 被继承的选择器名称

.alert {
    padding: 10px;
}
​
.alert a {
  font-weight: normal;
}
​
.alert-info {
    @extend .alert;
    color: red;
}
​
//结果css
.alert, .alert-info {
  padding: 10px;
}
​
.alert a, .alert-info a {
  font-weight: normal;
}
​
.alert-info {
  color: red;
}

@import

如果在css中使用@import 浏览器遇到一个@import就会发送一次请求

但是在scss文件使用@import 导入其他scss文件 ，最终会被合并成一个css文件

每一个scss文件就是一个partial，文件名必须用_开头

//_base.scss
body {
    padding: 0;
    margin: 0;
}

//style.css
@import "base"; //文件名只需要写_后面的即可
.nav {
    color: red;
}

最终的style.css

body {
    padding: 0;
    margin: 0;
}
​
.nav {
    color: red;
}

代码注释

支持标准的 Css 的注释语法，

单行注释 “//”

多行注释 “/ /”

  1. 单行注释，不会解析到 .css 文件中；
  2. 如果选择的输出格式是 compressed ，则所有的注释信息都不会解析出来；
  3. 在多行注释中添加 “!” ，则可保留这条注释到压缩文件中，此方法主要用于文件的版权声明；
  4. 多行注释中可以添加插值语句 (interpolation)
// 单行注释
​
/*
 * 多行注释 */
​
/*!
 * 版权声明
 * 作者: #{#author} */

数据类型

Scss 支持以下几种主要的数据类型：

  1. 字符串（ 有引号或无引号的字符串 ）：”foo”, ‘bar’, baz, …
  2. 数字：1, 2.5, 18px, 30%, 9a, …
  3. 颜色：blue, #00ff00, rgba(0, 0, 0, .1)
  4. 布尔型：true, false
  5. 空值：null
  6. 数组 (list) ， 用逗号或空格分割：1em 2em 2.5em 或 Helvetica, Arial, sans-serif, …
  7. maps，相当于 JavaScript 中的 object：key1: value1, key2: value2, …
$layer-index: 10;
$font-base-family: 'Open Sans', Helvetica, sans-serif;
$top-bg-color: rgba(0,0,0,.1);
$block-base-padding: 6px 10px 6px 10px;
$blank-mode: true;
$var: null //值null是其类型的唯一值。他表示缺少值，通常由函数返回以指示缺少结果
$color-map: (color1: #f00, color2: #0f0, color3: #00f);
$fonts: (serif: "Helvetica Neue", monospace: "Consolas");

判断数据类型的方式: type-of($value)

type-of(3) //number
type-of(5px) //number
type-of(hello) //string
type-of('hello') //string
type-of(1px solid #ccc) //list
type-of(#ff000) //color

字符串 (Strings)

支持有引号的字符串与无引号的字符串

有引号的字符串，无论单引号还是双引号，编译后都为双引号

无引号的字符串编译后同样没有引号

如果一段话由多个单词组成，并且包含空格，需要将引号加上。

// scss 代码编辑
$string1: "Sample 1";
$string2: 'Sample 2';
$string3: red;
body {
    content: $string1;
    content: $string2;
    color: $string3;
}
​
// 编译后的 css
body {
  content: "Sample 1";
  content: "Sample 2";
  color: red;
}

字符串函数

$greeting: "Hello world";
​
to-upper-case($greeting) //HELLO WORLD
to-lower-case($greeting) //hello world
​
str-length($greeting) //11
​
str-index($greeting,"Hello") //1（索引从1开始）

数字 (Numbers)

  1. 支持数字或带单位的数字，
  2. 支持整数或小数
  3. 支持正数与负数
$number1: 30;
$number2: 6.9;
$number3: 16px;
$number4: 32a; // 不规范，但不会报错
// 注：数字后接的任何字母都会视为单位，单位会和数字当作一个整体进行计算

数字函数

abs(10) //10
abs(10px) //10px
abs(-10px) //10px
​
round(4.5) //5
round(3.2) //3
​
ceil(3.2) //4
​
floor(3.2) //3
​
percentage(650px /1000px) //65%

颜色 (Colors)

Css 原有颜色类型，包括十六进制、RGB、RGBA、HSL、HSLA和色彩单词

颜色函数

rgb(红，绿，蓝) //0-255
​
rgba(红，绿，蓝，透明度) //a:0-1 0表示完全透明，1表示完全不透明
​
hsl(色相（0-360），饱和度（0-100%），明度（0-100%）)
​
hsla(色相（0-360），饱和度（0-100%），明度（0-100%）,透明度)
​
adjust-hue(hsl(1,100,50%),137deg) //#00ff48 将颜色调整得到16进制的颜色
​
ligten(red,20%)
darken(red,30%)
​
//修改颜色的透明度
$color : hals(222,100%,50%,0.5)
opacify($color,0.3) //增加不透明度  => 0.5+0.3 = 0.8
transparentize($color,0.2) //增加透明度 => 0.5-o.2 = 0.3

布尔型 (Booleans)

只有两个值 “true” 和 “false”，只有自身是 false 或 null 才会返回 false，其他一切都会返回 true，主要用于逻辑判断。

空值 (Null)

只有一个值 “null”，如 “$name: null;”。由于他为空，因此不能使用它与任何类型进行运算，主要用于逻辑判断。

数组 (List)

通过空格或半角逗号分割的一系列的值，数组中还可以包含子数组，如下方的 “list2”和“list2” 和 “list3″，当数组被编译为 css 时，圆括号不会被添加

$list1: 1px 2px 3px 4px; //一维数字
$list2: 1px 2px, 3px 4px; //二维数字
$list3: (1px 2px) (3px 4px); //二维数字
// 指定数组中的某个值进行调用
nth( $list, 2);

列表函数

length(5px 10px) //2
​
nth(5px 10px,1) //得到列表的第n项 索引从1开始
//5px
​
index(1px solid #ccc,solid) //2
​
append()

映射 (Maps)

Maps 必须被圆括号包裹，可以映射任何键值对

$map: (
  key1: value1,
  key2: value2,
  key3: value3
)

映射函数：

返回 Map 中 key 所对应的值( value )。如没有对应的 key，则返回 null 值。

map-get(map, key)
​
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-get($font-sizes, "small")
结果: 12px

判断 map 是否有对应的 key，存在返回 true，否则返回 false

map-has-key(map, key)
​
实例:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-has-key($font-sizes, "big")
结果: false

返回 map 中所有的 key 组成的队列

map-keys(map)
​
实例:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-keys($font-sizes)
结果: "small", "normal, "large"

合并两个 map 形成一个新的 map 类型，即将 map2 添加到 map1的尾部

map-merge(map1, map2)
​
实例:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
$font-sizes2: ("x-large": 30px, "xx-large": 36px)
map-merge($font-sizes, $font-sizes2)
结果: "small": 12px, "normal": 18px, "large": 24px, "x-large": 30px, "xx-large": 36px

移除 map 中的 keys，多个 key 使用逗号隔开

map-remove(map, keys...)
​
实例:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-remove($font-sizes, "small")
结果: ("normal": 18px, "large": 24px)
map-remove($font-sizes, "small", "large")
结果: ("normal": 18px)

返回 map 中所有的 value 并生成一个队列

map-values(map)
​
实例:
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-values($font-sizes)
结果: 12px, 18px, 24px

控制指令

@if @else if

@if 条件 {
    
}

@for

@for $var from <开始值> through <结束值> { //包括结束值
    
}
​
@for $var from <开始值> to <结束值> {  //不包括结束值
    
}

@each

遍历列表

@each $var in $list {
    
}

$icons: success error warning;
​
@each $icon in $icons {
    .icon-#{$icon} {
        background-image: url(../images/icons/#{$icon}.png)
    }
}
​
//结果css
.icon-success {
  background-image: url(../images/icons/success.png);
}
​
.icon-error {
  background-image: url(../images/icons/error.png);
}
​
.icon-warning {
  background-image: url(../images/icons/warning.png);
}
​

@while

@while 条件 {
}

$i: 6;
​
@while $i >0 {
    .item-#{$i} {
        width: 5px * $i;
    }
    $i: $i - 2;
}
​
//结果css
.item-6 {
  width: 30px;
}
​
.item-4 {
  width: 20px;
}
​
.item-2 {
  width: 10px;
}

函数

@function 函数名(参数1，参数2，...){
}

$colors: (light: #fff, dark: #000);
​
@function color($key) {
    @if not map-has-key($colors,$key) {
        @warn "在 $colors 中没有找到 #{$key} 这个key";
        @error "在 $colors 中没有找到 #{$key} 这个key"
    }
    @return map-get($color,$key);
}
avatar
文章
阅读
粉丝