当前位置 : 主页 > 网页制作 > css >

Sass

来源:互联网 收集:自由互联 发布时间:2021-06-13
Sass Sass 介绍 Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅

Sass

Sass介绍

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库有助于更好地组织管理样式文件,以及更高效地开发项目。

语法格式

Sass共有两种语法结构 SassScss。两种语法基本相同,但是Sass用缩进代替花括号,用换行代替了分号。

  • Sass

    .father
      width: 100px
      height: 100px
      .son
          width: 50px
          height: 50px
  • scss

    .father{
        width: 100px;
        height: 100px;
        .son{
            width: 50px;
            height: 50px;
        }
    }

变量

// scss中定义变量: $变量名: 变量值
$w: 100px;

sass中变量的特点:

  • 后定义的变量会覆盖先定义的变量
  • 可以通过值传递用变量给变量赋值
  • sass中的变量存在作用域
  • sass变量和less变量不同,sass中的变量不会进行预处理,不能先使用后定义

变量插值

// 在sass中,如果变量是属性值的话,可以直接 $变量名 调用
// 如果变量是属性名或者选择器名的话需要使用 #{$变量名} 调用
$d: div;
$w: width;
$h: height;
$size: 100px;

${d}{
    ${w}: $size;
    ${h}: $size;
}

运算

// sass中支持 + - * / 运算, 但是运算时都要用 () 将运算式包裹起来
div{
  width: (100px * 2);
  height: (400px / 2);
  background: red;
  margin-top: (10px + 10px);
  margin-bottom: (30px - 10px);
}

混合

// 创建混合: @mixin 混合名(){} 或 @mixin 混合名{}
// 调用混合: @include 混合名() 或 @include 混合名
@mixin center(){
    // ...
}
div{
    @include center();
    // ...
}

带参混合

@mixin whc($w: 200px, $h: 200px, $c: red){
  width: $w;
  height: $h;
  background: $c;
}

.box1{
  @include whc();
}

.box2{
  @include whc(300px, 300px, blue);
}

.box3{
  @include whc($c: yellow);
}

混合中的可变参数

// 变量名... 可以接受0个或多个参数
@mixin ani($name, $time, $args...){
    transition($name, $time, $args);
}

导入外部Sass文件

// 可以使用@import来导入外部Sass文件,文件的.scss后缀可以省略。
@import './css/center'

内置函数

// 和LESS一样, SASS中也提供了很多内置函数方便我们使用

// 字符串函数
/*
unquote($string):删除字符串中的引号;
quote($string):给字符串添加引号;
To-upper-case($string):将字符串小写字母转换为大写字母
To-lower-case($string):将字符串大写字母转换为小写字母
*/
// 数值函数
/*
percentage($value):将不带单位的数转换成百分比值;
round($value):将数值四舍五入,转换成一个最接近的整数;
ceil($value):向上取整;
floor($value):向下取整;
abs($value):取数的绝对值;
min($numbers…):找出几个数值之间的最小值;
max($numbers…):找出几个数值之间的最大值;
random(): 获取随机数
*/
// 颜色函数
/*
rgb($red,$green,$blue):根据红、绿、蓝三个值创建一个颜色;
rgba($red,$green,$blue,$alpha):根据红、绿、蓝和透明度值创建一个颜色;
red($color):从一个颜色中获取其中红色值;
green($color):从一个颜色中获取其中绿色值;
blue($color):从一个颜色中获取其中蓝色值;
mix($color-1,$color-2,[$weight]):把两种颜色混合在一起。
*/
// 列表函数
/*
length($list):返回一个列表的长度值;
nth($list, $n):返回一个列表中指定的某个标签值;
join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表;
append($list1, $val, [$separator]):将某个值放在列表的最后;
zip($lists…):将几个列表结合成一个多维的列表;
index($list, $value):返回一个值在列表中的位置值。
-->

自定义函数

@fuunction (num){
    return num * num + px;
}

div{
    width: square(20);
    height: square(20);
}

层级结构

// 和less中一样sass中在一个选择器样式内部写另一个选择器,默认是层级结构即父子关系,
// 可以通过添加 & 符来取消层级关系
.father{
    // ...
    &:hover{
        // ...
    }
    .son{
        // ...
    }
}

继承

// 和Less一样,Sass可以通过继承来降低代码冗余度
// Sass通过@extend来进行继承
.center{
    // ...
}

div{
    @extend .center;
}

条件判断

// sass中不支持混合的匹配模式,但是sass和less一样支持条件判断,而且比less中的更加彻底
// 格式@if(){}@else if(){}...else{}

// 绘制三角形
@mixin triangle($dir, $width, $color){
  width: 0;
  height: 0;
  border-width: $width;
  border-style: solid;
  border-color: transparent;
  @if($dir == Up){
    border-bottom-color: $color;
  }@else if($dir == Down){
    border-top-color: $color;
  }@else if($dir == Left){
    border-right-color: $color;
  }@else if($dir == Right){
    border-left-color: $color;
  }
}

div{
  @include triangle(Up, 30px, red);
}

循环

```scss
/*
sass中支持循环
for循环:
@for $变量名 form 变量起始值 through 变量结束值{}
@for $变量名 form 变量起始值 to 变量结束值{}
第一种for循环包前包后,第二种for循环包前不包后

while循环:
@while(循环条件){}

/
ul{
li{
/

// 从5到8的li背景变黄色
@for $i from 5 through 8 {
&:nth-child(#{$i}) {
background: yellow;
}
}
*/

$i: 5;
    @while($i <= 8){
        &:nth-child(#{$i}){
             background: yellow;
        }
        $i: $i + 1;
    }
}

} `

网友评论