01、Sass基础

什么是Sass？

Sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

安装Sass过程

一、安装Ruby（Windows）

Ruby + Devkit 2.6.5-1（x64）地址： https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.6.5-1/rubyinstaller-devkit-2.6.5-1-x64.exe

安装时除了更改路径外，其他都可以按照默认选项进行，直到安装完成的那个页面，把最后的勾去掉，如：

cmd进入控制台进行配置

//查看是否安装成功
ruby -v

//如安装成功会打印
ruby 2.6.5p114 (2019-10-01 revision 67812) [x64-mingw32]

//尽可能更新RubyGems版本
gem update --system //该命令请FQ一下

//更新后查看RubyGems版本
gem -v
//gem版本号
3.0.3  

//删除替换原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
//打印是否替换成功
gem sources -l
//确保只有 gems.ruby-china.com
https://gems.ruby-china.com

二、安装Sass

//Sass安装
gem install sass

//安装完之后查看版本，以确保安装成功
sass -v

//Sass常用命令
gem update sass  //更新sass
sass -v     //查看sass版本
sass -h     //查看sass帮助

三、安装Compass

// compass 是一个 sass 的库，compass 里面有很多封装好的 mixin ，有了它，我们就可以很快的写出完美的，兼容的样式。

//安装compass
gem install compass

//安装完之后查看版本，以确保安装成功
compass -v

四、编译sass的方法

CMD控制台

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果有很多sass文件的目录，可以监听整个目录
sass --watch c:/baidu/bbb

Sublime Text插件

//Sass Build 插件

安装完成后，工具 -> 编译系统 -> SASS

.scss 文件，ctrl+s保存后，ctrl+b编译，这时会在相同目录下，生成相同名字的.css 文件，还有同名的.css.map 文件。

如果：工具 -> 编译系统 -> SASS - Compressed ,那么生成的代码就是压缩的.css 文件。

//SublimeOnSaveBuild 插件
（按ctrl+s 就相当于：ctrl+s 和 ctrl+b）

安装完成后，不需要配置，编写完.scss 文件，ctrl+s 即可完成所需操作

VS Code插件：Live Sass Compiler

编译软件Koala：https://www.sass.hk/skill/koala-app.html

Sass基本语法

//变量名以$开头
$width:300px;
$height:300px;

//在写属性值的时候可以引用变量
div{
    width: $width;
    height: $height;
}

//变量名相同，最后的会覆盖之前的
$color:black;
$color:purple;

//!default表示默认的属性值
$position:static !default;

字符串变量及拼接

//变量可以是字符串
$str:'xxx.jpg';
$class:'.div';
//某些字符串可以不加引号
$string:abcdefg;

//引用字符串
.div{
    background-image: url('./img/'+$str);
}
//插值变量的方法引用字符串( #{} )
.div{
    background-image: url('./img/#{$str}');
}
#{$class} {
    color: $color;
}

变量作用域

//全局作用域。在{}外面写，每个地方都可以引用
$width:100px;
.div{
    width: $width;
}
.bb{
    height: $width;
}

//局部作用域,{}内部定义只能内部使用
.div{
    $color:red;
    color: $color;
}
.bb{
    color: $color; //这样会报错，除非全局有$color
}

@import不需要编译

//在sass文件中用@import，不会编译引入文件的情况（四种）

@import 'aa.css';   //以.css结尾
@import 'http://www.qmlqmlqml.shop/bbc.scss'    //以http://开头，无论文件是scss还是css都不会编译
@import 'url(bbc.css)';     //文件名是url()
//还有一种，@import 里面包含 media queries 的情况

@import需要编译，推荐的引入方式

//引入的文件名以 _ 开头，文件扩展名 .scss/.sass ，如：
_demo.scss
//这样的好处就是，保存的时候不会单独地生成.css的文件，以koala软件为例

//引入时，去掉 _ 和扩展名，如：
@import 'demo';

注意：不可以同时存在添加下划线 与 未添加下划线的 同名文件，添加下划线的文件将会被忽略

Sass基本数据类型

number类型

$zoomValue = 3;
.div{
    zoom:$zoomValue;
}

color类型

$color:red;
$colour:#fe3232;
.div{
    background-color:$color;
}

string类型

$str:'asdff.png'
.div{
    background-image:url('../shanghai/'+$str);
}

list类型（数组）

$list:(3,'ab',#fe3232,100px);
.div{
    color: nth($list,3);  //获取数组下标为3的元素，下标从1开始，不是0
    zoom:index($list,'ab'); //数组从头开始查找字符串'ab'，返回下标数字
}

map类型（对象）

$map:(position:absolute,top:3px,right:3px,bottom:5px,left:5px);
.div{
    position:map-get($map,position); //用map-get方法，获取$map里面的position属性
    top:map-get($map,top);
    left:map-get($map,left);
}
//map类型的循环遍历
.div{
    @each $key,$value in $map{
        #{$key} : #{$value};    
    }
}

算术运算

变量

.div{
    $num1:100px;
    $num2:200px;
    //加
    width: $num1 + $num2;
    //减
    height:$num2 - $num1;
    //乘，这里变量只能乘数字，两个变量相乘会报错
    margin:$num1*3;
    //除，这里只能乘数字
    border:$num2/25;
}

非变量

.div{
    //加
    width: (10px+3);
    //减
    height: (10px-4);
    //乘
    margin: (8px*4);
    //除
    border: (8px/2);
    //注：非变量的加减乘除要在()里面，几个数之间只需要一个带单位即可
}

颜色运算

.div{
   $color1:#fe0325;
   $color2:#c8f9l3;
   
   //两个16进制的数值相加（即将淘汰）
   color: $color1 + $color2; 
   
   //两种颜色混合
   colour:mix($color1,$color2);

   
   color: red($color1);//获取$color1的红色素
   
   color: green($color1);//获取$color1的绿色素
   
   color: blue($color1);//获取$color1的蓝色素
   
   //输出结果与$color1的值相同
   color: rgb(red($color1),green($color1),blue($color1));
}

字符串运算（介绍string类型时说过）

$str:'asdff.png'
.div{
    background-image:url('../shanghai/'+$str);
}

一般的mixin（混合宏）

//定义时：@mixin 名字 {}  ，里面可以放各种样式
@mixin hello{
    display: block;
    font: {
        size: 20px;
　　　　　weight:500;
    };
    color:blue;
}

.div{
    //引入时：@include 名字
    @include hello;
}

嵌套的mixin

@mixin hello{
    display: block;
    font-size: 20px;;
    color:blue;
}
@mixin hi{
    name:hello;
    age:18;
    @include hello;  //这里尾部，引入hello代码块
}
.div{
    cursor: pointer;
    @include hi;    //这里引入hi代码块
    font-family: "agency fb";
}

带参数的mixin

@mixin seeyou($name,$age){  //这里可以用,隔开，接收多个参数
    name:$name;
    age:$age;
    border: 88px;
}
.div{
    @include seeyou('zhangsan',18); //这里调用mixin的时候要给实参
}

Sass继承

简单继承

.div1{
    color: red;
}
.div2{
    @extend .div1;  //继承：@extend 需要继承选择器的名字
    background-color: blue;
}

关联属性继承

.div1{
    color: red;
}
.div1.other{
    background-color: blue;
}
.dd{
    @extend .div1; //不单单继承div1，选择器中包含div1的也继承
}

链式继承

.div1{
    color: red;
}
.div2{
    background-color: blue;
    @extend .div1;  //继承了div1
}
.dd{
    cursor: pointer;
    @extend .div2;  //不仅继承div2，div2里面继承了div1，所以div1跟div2都继承了
}

伪类继承

a:hover{
    background-color: red;
}
.div{
    @extend :hover; //继承了a的伪类
    color: black;
}

Sass嵌套

一般嵌套.

div > .inner > .cc

.div{
    color: cyan;
    font-size: 30px;
    .inner{    //div里面的inner
        position: relative;
        top: 20px;
        left: 10px;
        .cc{    //div里面的inner里面的cc
            width: 200px;
        }
    }
}

特殊嵌套

一般以横杠分离的属性都可以嵌套，如：background-color、background-clip，可把color、clip嵌套到background里面去

.div{
    background:{
        image:url('../haha.jpg');   //表示background-image
        clip: border-box;       //表示background-clip
    };
    font:{
        size: 30px;     //表示font-size
        family:'abc';   //表示font-family
    };
}

Sass条件控制语句

if else 语句

// {}里面可以用
$name:'zhangsan';
.div{
    @if $name == 'lisi'{
        color: red;
    }@else if $name == 'xiaoming'{
        color: orange;
    }@else{
        color: purple;
    }
}
//注意if else 语句前面记得加@，判断语句不需要括号

//{}外面也能使用
@if $name == '123'{
    .div{
        position: absolute;
    }
}@else{
    .bb{
        height: 30px;
    }
}

for语句

@for $i from 1 through 5{   //循环1-5次，包含第5次，实际5次
    .cc#{$i}{
        color: blue;
    }
}
@for $i from 1 to 5{    //循环1-5次，不包含第5次，实际4次
    .aa#{$i}{
        color: blue;
    }
}

for遍历list

$list:(1,2,3,4,5);
@for $i from 1 through length($list){    //遍历一般用through，length($list)表示$list的数组长度
    .div#{$i} {
        width: 100px;
    }
}

while语句

$i:1;
@while $i<5 {   //符合条件才能进入循环
    .div#{$i} {
        color: white;
    }
    $i:$i+1;    //记得要对循环数做操作，不然报错死循环
}

each遍历map

$map:(top:10px,right:10px,bottom:5px,left:7px); //记得map是用()的
.div{
    @each $key,$value in $map {     //$key表示键，$value表示值
        #{$key}:$value;   //将键值对循环输出
    }
}

内置函数

Number函数

.div {
    zoom: percentage(0.33); //转换为百分比
    
    zoom: round(4.5);   //四舍五入
    
    zoom: ceil(22.5);   //向上取整
    
    zoom: floor(22.5);  //向下取整
    
    zoom: abs(-33);    //取绝对值
    
    zoom: random(10);   //取0-10之间的数，若省略数字，则取0-1之间的数
    
    $a: 1;
    $b: 2;
    $c: 3;
    zoom: min($a, $b, $c);  //取最小值，里面必须是变量，切要两个以上
    zoom: max($a, $b, $c);  //取最大值，规则同上
}

List函数（数组）

$list:(5,4,3,2,1);

@debug length($list);    //获取数组长度

@debug nth($list,3);    //获取指定数组下标的元素

@debug set-nth($list,1,'bb');    //获取下标为1的元素，替换为bb

$list2:('aa','bb','cc');

@debug join($list,$list2);        //将$list和$list2拼接在一起。只能两个数组拼接
@debug join($list,(33,44));

@debug append($list2,'dd');    //将'dd'拼接到数组后面

@debug index($list2,'ff');     //查找'aa'是否存在，存在返回下标，不存在返回null

String函数（字符串）

$da:'HELLO';
$xiao:hello;
.div{
    color:unquote($da);      //去除字符串引号
    color:quote($xiao);      //添加字符串引号
    } 
@debug str-length($xiao);     //获取字符串长度

@debug str-index($xiao,'c');    //查看字符串是否存在'e'，存在返回下标，不存在返回null

@debug to-upper-case($xiao);    //小写转大写
@debug to-lower-case($da);        //大写转小写

Map函数（对象）

$map:(top:10px,right:10px,bottom:5px,left:7px);

@debug map-get($map,top);    //获取$map的top，若存在返回所对应的value值，若不存在返回null
@debug map-has-key($map,top);    //查看$map是否有top这个key值，有就返回true，否则false

@debug map-remove($map,top);    //删除$map里面的top值，后返回剩下的key和value

@debug map-keys($map);    //返回$map的所有key值
@debug map-values($map);    //返回$map的所有value值

@mixin hello($ags...){
    @debug keywords($ags);    //用keywords方法，打印出接收到的所有参数
}
@include hello($name:'zhangsan',$sex:'male',$age:18);    //注意：key值要以$开头

Function函数

//自定义函数
@function haha($aa,$bb){  //接收两个参数
    @return $aa+$bb;   //返回两个参数相加的结果
}
.div{
    width: haha(10px,20px);  //调用haha函数，并按照需求传入两个参数
}

posted @ 2020-04-03 23:11 JaydenQiu 阅读(188) 评论(0) 收藏举报

刷新页面返回顶部

戒奢从简，起早贪黑，努力提升

——拼搏