Sass学习笔记及常用语法备忘

发布时间:2020-09-08 浏览量: 2491 文章分类: 前端相关

学习前端的同学肯定都知道Sass，经常看到Sass、Less什么的一大堆，一直不知道是啥，通过自己学习，终于搞懂了。不过比较乱，如果跟着每个都练一下肯定是能搞懂的

Sass简介

Sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言 CSS预处理工具工作流程：前置文件 -> 编辑解析 -> CSS文件目前市面比较流行的有sass、less、stylus

通过 .sass或.scss文件 + Sass工具编辑以后可以生成.css文件

Sass可以帮助我们解决什么问题

嵌套规则
- 通过花括号的方式解决复杂的css父子样式嵌套问题
变量规则
- 通过变量将公共样式抽离，减少冗余css代码
条件逻辑
- 像高级语言一样编写逻辑性的css代码

Sass环境安装

Sass是基于Ruby开发的，所以需要先安装Rubymac下自带Ruby无需在安装Ruby!

可以在终端中输入ruby -v来查看，如果没有安装的话，可以输入brew install ruby安装即可

在使用Ruby来安装Sass
- 可以在安装完毕ruby后，输入gem sources -l查看一下源的地址。显示出https://rubygems.org/即可。
- 安装Sass 则直接使用gem install sass安装，如果mac安装遇到权限问题，可以使用sudo gem install sass
- 安装完毕后可以输入 sass -v查看是否安装成功
编译Sass-命令行
- 单文件转换命令 sass input.sass output.css
- 单文件监听命令 sass --watch input.scss:output.css
- 如果有很多sass文件的目录，也可以监听整个目录 sass --watch app/sass:public/stylesheets
在VSCode中，有很方便的插件可以直接使用，只需要安装Live Sass Compiler插件即可，然后在编写的.sass文件中按F1或ctrl+p 唤起命令行
- Watch Sass从状态栏单击以打开实时编译，然后Stop Watching Sass从状态栏单击以打开实时编译。
- 按F1或ctrl+shift+P键入Live Sass: Watch Sass以开始实时编译，或者按键入Live Sass: Stop Watching Sass以停止实时编译。
- 按F1或ctrl+shift+P键入一次Live Sass: Compile Sass - Without Watch Mode 以编译Sass或Scss。
还有就是可以使用koala这个工具来使用中文官网是：http://koala-app.com/index-zh.html也都是很方便的。

Sass核心基础知识（SassScript）

基础知识
变量和引用 ```css $width:300px;//定义了了一个变量叫width，值是300px $height:300px; //定义了一个变量叫height，值是300px $color:#e03434; //定义了一个变量叫color，颜色是#e03434 $str:'hello.jpg'; //定义字符串、文件路径等 $strNoQout:abc; //定义不加引号的字符串

//相同的变量名，后面的会覆盖前面的 // 如果有一个!default 则表示默认值，会在后续的定义只要有重名就可以被其他的覆盖掉 $baseWidth:200px; $baseWidth:100px !default;

$class : '.div'; // 支持变量

// 下面的就等同于.div { width: 300px; height: 300px; }

{$class}{
```
width: $width;
height: $height;
```
}

.div{ width:$width; height:$height; background-color:$color; background-image: url('./img/'+$str); //可以直接拼接，等同于background-image: url("./img/hello.jpg"); } } .div2{ width:$baseWidth; height:$baseWidth; background-color:$color; background-image: url('./img/#{$strNoQout}'); //生成结果background-image: url("./img/abc"),这种插值变量的方式也是很直观并且方便的 }

    + 变量作用域
        Sass的变量作用域和括号有关,内部定义的只能在内部使用，外部是不能使用的。类似局部变量

    + @import的用法
        @import 本身css也是原生支持的。
> Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
Sass 在当前地址，或 Rack, Rails, Merb 的 Sass 文件地址寻找 Sass 文件，如果需要设定其他地址，可以用 :load_paths 选项，或者在命令行中输入 --load-path 命令。
通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
文件拓展名是 .css；
文件名以 http:// 开头；
文件名是 url()；
@import 包含 media queries。
如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。

```css
//比如我在.sass文件中写入如下样式的
@import 'layout.css';
//生成如下(直接被引入)
@import url(layout.css);

Sass官方推荐使用Partials的方法来引入

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

//先在同目录创建一个_base.scss文件里面写上如下代码
body{
    padding:0;
    margin:0
}

//在我们的sass文件用进行如下引用
@import 'base';

$width:300px;
$color:#ffe932;

.div1{
    width: $width;
    height: $width;
    $widthInner:100px;

}

//后续会生成如下代码
body { margin: 0px; padding: 0px; }
.div1 { width: 300px; height: 300px; }

数据类型

/*number 数字类型*/
$width:300px;
$zoomValue:2; //数字类型

.div{
    width:$width;
    height: $width;
    zoom:$zoomValue;
}
/*编辑结果*/
.div { width: 300px; height: 300px; zoom: 2; }

/*颜色类型*/
$color:red; //颜色类型
$colorHex:#ffe932; //颜色类型

.div{
    color: $color;
    background-color: $colorHex;
}
/*编辑结果*/
.div { color: red; background-color: #ffe932; }

/* 数组 */
$list:(100px,'string',300px,2,'red');
.div{
    width: nth($list,1); //下标是从1开始的
}
/*编辑结果*/
.div { width: 100px; }

/* --------- */
$list:(100px,'string',300px,2,'red');

.div{
    zoom:index($list,'string');//下标是从1开始的
}
/* 编译结果 */
.div { width: "red"; zoom: 2; }

/* map */
$map:(top:1px,left:2px,bottom:3px,right:4px);

.div{
    top: map-get($map,top); //关键词map-get
}
/* 编译结果 */
.div { top: 1px; }

/* ---------- */
$map:(top:1px,left:2px,bottom:3px,right:4px);

.div{
    /* 循环遍历 */
    @each $key,$value in $map {
        #{$key}:$value;
    }
}
/* 编译结果 */
.div { top: 1px; left: 2px; bottom: 3px; right: 4px; }

变量运算

$num1:100px;
$num2:200px;
$width:$num1 + $num2;

.div{
    width: $width;
}
/* 编译结果 */
.div { width: 300px; }
/* 除法运算 */
.div{
    font: (10px/8);//只要有一个变量有单位即可
}
/* 编译结果 */
.div { font: 1.25px; }

/* ----- */
$num1:100px;
$num2:200px;
$width:$num1 + $num2;

.div{
    font: $width/2;
}
/* 编译结果 */
.div { font: 150px; }

/* 乘法运算 */
.div{
    font: (10px*8);//只要有一个变量有单位即可
}
/* 编译结果 */
.div { font: 80px; }

/* 混合运算 */
$num1:100px;
$num2:200px;
$width:$num1 + $num2;

.div{
    font:(5px + 8px/2);
}
/* 编译结果 */
.div { font: 9px; } //先乘除在加减

/* 颜色运算 */
/* 注意，这种方法可以使用，但是官方不推荐使用，已经过期的用法 */
$color1:#010203;
$color2:#040506;
$color3:#a69e61;

.div{
    color: $color1 + $color2;
}
/* 编译结果 */
.div { color: #050709; } // 直接进行数字相加

/* 颜色运算 */
/* 推荐方法 */
$color1:#010203;
$color2:#040506;
$color3:#a69e61;

.div{
    color: mix($color2 ,$color2); //使用mix（混合色来使用）
}
/* 编译结果 */
.div { color: #040506; }

/* --------- */
$color1:#010203;
$color2:#040506;
$color3:#a69e61;

.div{
    color: red($color1);
}
/* 编译结果 */
.div { color: 1; }//获取红色值
/* ---- */
同样也可以在sass中使用 
color:red($color1);
color:green($color1);
color:blue($color1);
color:grb(red($color1),green($color1),blue($color1);

/* 字符串拼接 */
$str:'hello.jpeg';

.div{
    background-image: url('img/'+$str);
}
/* 编译结果 */
.div { background-image: url("img/hello.jpeg"); }

mixin（混合宏）

// 一般mixin
@mixin helloMixin {
    display: inline-block;
    font: {
        size: 20px;
        font-weight: 500;
    };
    color: red;
}

.div{
    @include helloMixin;
}
/* 编译结果 */
.div { display: inline-block; font-size: 20px; font-font-weight: 500; color: red; }

/* 循环引用 */
@mixin helloMixin {
    display: inline-block;
    font: {
        size: 20px;
        font-weight: 500;
    };
    color: red;
}
@mixin helloMixin2 {
    padding: 10px;
    @include helloMixin;//同时引入helloMixin，可以相互嵌套，如果都存在统一变量的声明，则会都展示出来。
    background-color: red;
}

.div{
    @include helloMixin2;
}
/* 编译结果 */
.div { padding: 10px; display: inline-block; font-size: 20px; font-font-weight: 500; color: red; background-color: red; }

/* 传入参数的mixin */
@mixin sexy-boder ($color,$width){
    border:{
        color: $color;
        width: $width;
    };
}

.div{
    @include sexy-boder(blue,2px ) //传入了2个参数
}
/* 编译结果 */
.div { border-color: blue; border-width: 2px; }

继承

.div{
    border: 1px;
    background-color: red;
}
.divext{
    @extend .div; //继承div的属性
    border-width: 3px;
}
/* 编译结果 */
.div, .divext { border: 1px; background-color: red; }
.divext { border-width: 3px; }

/* 关联属性继承 */
.div1{
    border: 1px;
    background-color: red;
}
.div1.other{
    background-image: url('hello.jpeg');
}

.devext{
    @extend .div1;
}
/* 编辑结果 */
.div1, .devext { border: 1px; background-color: red; }
.div1.other, .other.devext { background-image: url("hello.jpeg"); }

/* 链式继承 */
.div1{
    border: 1px solid #000;
}
.div2{
    @extend .div1;
    color: red;
}
.div3{
    @extend .div2; //同时继承了div1、div2的样式
    color: #000;
}
/* 编译结果 */
.div1, .div2, .div3 { border: 1px solid #000; }
.div2, .div3 { color: red; }
.div3 { color: #000; }

/* 伪类继承 */
a:hover{
    text-decoration: underline;
}

.hoverlink{
    color: red;
    @extend :hover;
}
/* 编译结果 */
a:hover, a.hoverlink { text-decoration: underline; }
.hoverlink { color: red; }

嵌套

$width:300px;
$color:#fff;

.div1{
    width: $width;
    height: $width;
    background-color: $color;
    // 子元素
    .div-inner{
        width: $width;
        height: $width;
        background-color: $color;
    }
    a{
        color: red;
    }
}
/* 编译结果 */
.div1 { width: 300px; height: 300px; background-color: #fff; }
.div1 .div-inner { width: 300px; height: 300px; background-color: #fff; }
.div1 a { color: red; }

条件控制主要包括@if、@for、@while、@each等条件控制语句

/* if语句 */
$type:'tony';

p{
    @if  $type=='bufy' {
        color: red;
    } @else if $type == 'tim'{
        color: blue;
    } @else if $type == 'tony'{
        color: green;
    } @else {
        color: black;
    }
}

/* 编译结果 */
p { color: green; }

/* ------------ */
@if $type == 'bufy'{
    .div{
        color:red;
    }
} @else {
    .div{
        color: green;
    }
}
/* 编译结果 */
.div { color: green; }

/* for语句 */
/* 使用through则遍历的是1、2、3 */
@for $i from 1 through 3{
    .item#{$i}{
        width:1px*$i;
    }
}
/* 编译结果 */
.item1 { width: 1px; }
.item2 { width: 2px; }
.item3 { width: 3px; }

/* ------ */
/* 如果是用to  ，则遍历的是 1、2 */
@for $i from 1 to 3{ 
    .item#{$i}{
        width:1px*$i;
    }
}
/* 编译结果 */
.item1 { width: 1px; }
.item2 { width: 2px; }
/* ------------ */
/* 循环遍历数组 */
$list:(1,2,3,4,5);
@for $i from 1 through length($list){
    .item#{$i}{
        width: 1px*$i;
    }
}
/* 编译结果 */
.item1 { width: 1px; }
.item2 { width: 2px; }
.item3 { width: 3px; }
.item4 { width: 4px; }
.item5 { width: 5px; }

/* while */
$i:6;
@while $i >0 {
    .item#{$i}{
        width: 1px * $i;
    }
    $i :$i - 2;
}
/* 编译结果 */
.item6 { width: 6px; }
.item4 { width: 4px; }
.item2 { width: 2px; }

/* each一般和map结合使用 */
$map:(
    top:1px,
    left:2px,
    bottom:3px,
    right:4px
    );

.div{
    @each $key, $value in $map {
        #{$key}:$value;
    }
}  
/* 编译结果 */
.div { top: 1px; left: 2px; bottom: 3px; right: 4px; }

Sass 函数

数字型内置函数
- percentage($number) 转换成百分比
- round($number)执行标准舍入，也就是四舍五入为最接近的整数
- ceil($number)执行向上舍入，数值向上舍入为最接近的整数
- floor($number)执行向下舍入，数值向下舍入为最接近的整数
- abs($number)获取绝对值
- min($numbers...)获取最小值
- max($numbers...)获取最大值
- random()获得随机数，如果什么都不写，默认取0~1的随机数，如果写一个数，比如10，就是0~10的随机数
数组型内置函数
- length($list)获取数组的长度
- nth($list,$n)获取指定下标的元素，下标从1开始
- set-nth($list,$n,$value)替换指定下标的元素
- join($list1,$list2)拼接数组
- append($list1,$val,[$separator])从数组尾部添加元素
- index($list,$value)返回指定元素在数组中的位置
字符串内置函数
- unquote($string)去除引号
- quote($string)添加引号
- str-length($string)获取字符串长度
- str-insert($string,$insert,$index)在指定位置插入字符
- str-index($string,$substring)返回指定字符在字符串的位置
- to-upper-case($string)转换成大写
- to-lower-case($string)转换成小写
map内置函数
- 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
自定义函数

$rem1:100px;
@function px2rem($px){
    $rem:37.5px;
    @return ($px/$rem) + rem;
}

.div{
    width: px2rem($rem1);
}
/* 编译结果 */
.div { width: 2.66667rem; }

Sass学习笔记及常用语法备忘

Sass简介

Sass可以帮助我们解决什么问题

Sass环境安装

Sass核心基础知识（SassScript）

{$class}{

Sass 函数

Vite安装及使用

python&anacondda更换国内清华、阿里源

mac下安装npm及设置淘宝镜像

Django 接入微信支付详细说明

css 网页实现属实的遮罩毛玻璃&高斯模糊效果(QQ音乐播放效果)

Django+mysql的migration同步数据库未执行问题

CSS3引入自定义字@font-face详解

Django搭配Editor.md上传图片问题解决方案

JavaScript&Python实现九九乘法表（for循环的运用）

JavaScript实现返回任意一组数的平均值

python-sqlalchemy 使用学习记录之基础连接数据库&安装接篇

Vue学习笔记-基础篇内部指令等

python&anacondda更换国内清华、阿里源

Django 前端渲染图片路径问题解决方案

将Bootstarp4模态框功能改造成登陆弹出页

Sass学习笔记及常用语法备忘

Sass简介

Sass可以帮助我们解决什么问题

Sass环境安装

Sass核心基础知识（SassScript）

{$class}{

Sass 函数

Vite安装及使用

python&anacondda更换国内清华、阿里源

mac下安装npm及设置淘宝镜像

Django 接入微信支付 详细说明

css 网页实现属实的遮罩毛玻璃&高斯模糊效果(QQ音乐播放效果)

Django+mysql的migration同步数据库未执行问题

CSS3引入自定义字@font-face详解

Django搭配Editor.md上传图片问题解决方案

JavaScript&Python实现九九乘法表（for循环的运用）

JavaScript实现返回任意一组数的平均值

python-sqlalchemy 使用学习记录之基础连接数据库&安装接篇

Vue学习笔记-基础篇内部指令等

python&anacondda更换国内清华、阿里源

Django 前端渲染图片路径问题解决方案

将Bootstarp4模态框功能改造成登陆弹出页

Django 接入微信支付详细说明