sass

编译

手动编译

sass 源目录:目标目录

自动编译

sass --watch 源目录:目标目录

sass --watch scss:css 
sass --watch scss:css --style compact # 格式化方式缩紧
sass --watch scss:css --style compressed # 格式化方式压缩
sass --watch scss:css --style expanded# 格式化方式展开

变量

定义变量使用 $ 符号

// 定义一个变量
$primary-color:red;

// 同时支持多个值
$primary-border: 1px solid $primary-color;

body{
    // 使用变量
    color: $primary-color;
    border:$primary-border;
}

body {
  color: red;
  border: 1px solid red;
}

/*# sourceMappingURL=%E5%8F%98%E9%87%8F.css.map */

嵌套

适量的使用嵌套可提高代码复用性

.nav{
    height: 100px;
    ul{
        margin:0;
        li{
            float:left;
            list-style:none;
            padding:5px;
            
        }
    }
}

.nav {
  height: 100px;
}
.nav ul {
  margin: 0;
}
.nav ul li {
  float: left;
  list-style: none;
  padding: 5px;
}

/*# sourceMappingURL=%E5%B5%8C%E5%A5%97.css.map */

引用父选择器

& 表示父选择器

.nav{
    height: 100px;
    ul{
        margin:0;
        li{
            float:left;
            list-style:none;
            padding:5px;
            &:hover{
                font-weight: bolder;
            }
        }
    }
    & &-text{
        font-size: 15px;
    }
}

.nav {
  height: 100px;
}
.nav ul {
  margin: 0;
}
.nav ul li {
  float: left;
  list-style: none;
  padding: 5px;
}
.nav ul li:hover {
  font-weight: bolder;
}
.nav .nav-text {
  font-size: 15px;
}

/*# sourceMappingURL=%E5%B5%8C%E5%A5%97.css.map */

属性嵌套

属性也可用来嵌套

// 属性嵌套


body {
    font: {
        family: "Arial";
        size: 15px;
        weight: bolder;
    }
}


.nav{
    border: 1px solid red{
        left:10px;
        right:10px;
    }
}

body {
  font-family: "Arial";
  font-size: 15px;
  font-weight: bolder;
}

.nav {
  border: 1px solid red;
  border-left: 10px;
  border-right: 10px;
}

/*# sourceMappingURL=%E5%B5%8C%E5%A5%97.css.map */

混合

@mixin 名字(param1,param2...){

...

}

定义一个mixin

定义：@mixin name

使用：@include mixinName

@mixin alert {
    color: red;
    background-color:blue;
    a{
        color: yellow;
    }
}


.alert-warning{
    @include alert;
}

.alert-warning {
  color: red;
  background-color: blue;
}
.alert-warning a {
  color: yellow;
}

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

mixiin参数

// 定义
@mixin alert-e($text-color,$background) {
    color: $text-color;
    background-color:$background;
    a{
      // darken 函数 调整颜色深浅
        color:darken($text-color,10%);
    }
}
// 调用
.aler-error{
    @include alert-e(red,red);
}

.aler-error {
  color: red;
  background-color: red;
}
.aler-error a {
  color: #cc0000;
}

指定参数

.alert-info{
  // 手动指定参数
    @include alert-e($background:#b89,$text-color:#473);
}

.alert-info {
  color: #473;
  background-color: #b89;
}
.alert-info a {
  color: #305324;
}

样式继承

继承样式：@extend

会继承所有样式

.alert{
    padding:15px;
    a{
        color: #838383;
    }
}


.alert-info{
    // 继承 所有样式
    @extend .alert;
    background-color: #d9eda1;
}

.alert, .alert-info {
  padding: 15px;
}
.alert a, .alert-info a {
  color: #838383;
}

.alert-info {
  background-color: #d9eda1;
}

/*# sourceMappingURL=%E7%BB%A7%E6%89%BF-%E6%89%A9%E5%B1%95.css.map */

导入样式

导入:@import

@import "./嵌套.scss";
body{
    margin:0;
}

.nav {
  height: 100px;
}
.nav ul {
  margin: 0;
}
.nav ul li {
  float: left;
  list-style: none;
  padding: 5px;
}
.nav ul li:hover {
  font-weight: bolder;
}
.nav .nav-text {
  font-size: 15px;
}

body {
  font-family: "Arial";
  font-size: 15px;
  font-weight: bolder;
}

.nav {
  border: 1px solid red;
  border-left: 10px;
  border-right: 10px;
}

body {
  margin: 0;
}

/*# sourceMappingURL=%E5%AF%BC%E5%85%A5.css.map */

注释

单行注释
多行注释
强制注释

/*
    多行注释
    通常不会在css里面保留
    如果 模式 是  expanded 则会在css里面保留

*/


// 单行注释 同样也不会在css 里面保留


/*!
强制注释 强制在 css里面保留
*/

数据类型

sass -i 打开交互式环境

> sass -i
>> type-of(1)
"number"
>> type-of("1")
"string"
>> type-of(hello)
"string"
>> type-of(1xp solid red)
"list"
>> type-of(5px 10px)
"list"
>> type-of(#ff0000)
"color"
>> type-of(red)
"color"

number

sass可以直接进行运算

需要注意: 除法运算需要用到括号

> sass -i
>> 1 + 2
3

>> 2 * 3
6
# 特别注意
>> 8 / 4
8/4
# 带括号才能算出值
>> (8 /2)
4

>> 5px + 6px
11px
>> 5px -2
(5px -2)
>> 5px - 2
3px
>> 5px * 2
10px
>> (10px / 2px)
5
>> (10px /2)
5px
>> 3 + 2 * 5px
13px

数字函数

# 绝对值
>> abs(-10)
10

>> abs(-10px)
10px

# 四舍五入
>> round(3.5)
4
>> round(2.4)
2


# 向上取整
>> ceil(3.1)
4
>> ceil(2.9)
3

# 向下取整
>> floor(2.8)
2
>> floor(2.1)
2

# 百分比
>> percentage(650px / 1000px)
65%

# 最大值
>> max(1,2,3,)
3

# 最小值
>> min(1,2,3,)
1

string

# 字符串相加
>> "hello"+"world"
"helloworld"
>>
>> "hello"+"world"
"helloworld"

# 带引号 与不带引号 相加 结果 带引号
>> “tom” + jerry
"tomjerry"

# 不带引号 与带引号 相加 结果 不带引号
>> tom + " " + "jerry"
"tom jerry"

# 字符串和 数字相加 结果是 字符串
>> "china " + 10086
"china 10086"
# 字符串和字符串相减 结果是字符串
>> jack - alice
"jack-alice"
# 字符串直接相除  字符串拼接
>> 14px/1.8
14px/1.8

字符串函数

>> $word:"Hello,World!"
"Hello,World!"

# 到大写
>> to-upper-case($word)
"HELLO,WORLD!"
# 到小写
>> to-lower-case($word)
"hello,world!"
# 字符串长度
>> str-length($word)
12
# 字符串位置
>> str-index($word,"world")
null
>> str-index($word,"World")
7

# 字符串插入
>> str-insert($word,"123",4)
"Hel123lo,World!"

颜色

# rgb
>> rgb(88,88,88)
#585858

>> rgb(60%,88,88)
#995858
>>

# rgba --- alpha 透明度
>> rgba(66, 66, 66 ,0.8)
rgba(66, 66, 66, 0.8)

# 色相 饱和度 明度
>> hsl(0,100%,50%)
#ff0000
>>

# 色相 饱和度 明度 透明度
>> hsla(0,100%,50%,0.3)
rgba(255, 0, 0, 0.3)
>>


# 调整色相
>> adjust-hue(#ff0000,137deg)
#00ff48

# 调整明度

# lighten 亮
>> lighten(red,20%)
#ff6666

# darken 暗
>> darken(red,20%)
#990000

# 调整饱和度
>> saturate(red,30%)
#ff0000


>> desaturate(red,20%)
#e61a1a


# 透明度
>> opacify(red,0.2)
#ff0000

>> transparentize(red,0.4)
rgba(255, 0, 0, 0.6)

列表

>> 1 2 3
(1 2 3)
>> 1, 2, 3
(1, 2, 3)

列表函数

# 列表长度
>> length(1px 2px 3px)
3
# 访问列表元素
>> nth(3px 1px 2px,2)
1px
>> nth(3px 1px 2px,1)
3px

# 查找元素索引
>> index(1px 2px 3px,3px)
3

# 添加元素
>> $nums:1 2 3
>> append($nums,4)
(1 2 3 4)

>> append(1px 2px,3px)
(1px 2px 3px)

# 列表合并
>> join(5px 10px,1px 2px)
(5px 10px 1px 2px)

# 逗号分隔
>> join(5px 10px,1px 2px,comma)
(5px, 10px, 1px, 2px)

map

键值对

>> $colors:(light:rgb(255,0,0),medium:rgb(230,0,0),fade:rgb(180,0,0))
(light: red, medium: #e60000, fade: #b40000)

# map 大小
>> length($colors)
3

# 访问 map
>> map-get($colors,medium)
#e60000


# 查看所有 key
>> map-keys($colors)
("light", "medium", "fade")


# 查看所有值
>> map-values($colors)
(#ff0000, #e60000, #b40000)

# 是否包含该key
>> map-has-key($colors,light)
true
>> map-has-key($colors,dark)
false


# map合并

>> map-merge($colors,(dark:rgb(0,0,0)))
(light: red, medium: #e60000, fade: #b40000, dark: black)

# 移除元素
>> map-remove($colors,light,fade)
(medium: #e60000)

布尔值

>> 5px > 3px
true
>> 5px >10px
false
>> 5px == 5px
true

# and
>> 5px >3px and 3px <5px
true

>> 5px >3px and 3px>5px
false
>>
# or
>> 5px >3px or 3px>5px
true
# not

>> not(1>2)
true
>> not(1<2)
false

interpolation 插值

#{$变量名}

$version:"0.0.1";
$name:"success";
$attr:"border";


/*!
    project: #{$version}
*/

.alert-#{$name}{
    font-size: 10px;
    #{$attr}:1px solid red;
}

/*!
    project: 0.0.1
*/
.alert-success {
  font-size: 10px;
  border: 1px solid red;
}

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

控制指令

for...each...
while

if else

@if $var{

}

@else{

}

@if else{

}


$is-other: false;
$dark-mode: false;

$theme:"github";

body{
    @if $dark-mode {
        background-color:black;
    }@else if $theme=="github" {
        background-color:gray;
    }@else{
        background-color:white;
    }
}

.rounder{
    @if $is-other {
        -webkit-border-radius:5px;
    }@else{
        border-radius: 5px;
    }
}

body {
  background-color: gray;
}

.rounder {
  border-radius: 5px;
}

/*# sourceMappingURL=%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6.css.map */

for...from throuth

for $var from <start> through <end>{

...

}


$colums:4;

// 闭区间
@for $var from 1 through $colums{
    .col-#{$var}{
        width: (100% / $colums);
        font-size: 10px;
    }
}

.col-1 {
  width: 25%;
  font-size: 10px;
}

.col-2 {
  width: 25%;
  font-size: 10px;
}

.col-3 {
  width: 25%;
  font-size: 10px;
}

.col-4 {
  width: 25%;
  font-size: 10px;
}

for...from to

@for $var from start to end{

...

}

// 开区间
@for $var from 1 to $colums{
    .col-to-#{$var}{
        width: (100% / $colums);
        font-size: 10px;
    }
}

.col-to-1 {
  width: 25%;
  font-size: 10px;
}

.col-to-2 {
  width: 25%;
  font-size: 10px;
}

.col-to-3 {
  width: 25%;
  font-size: 10px;
}

@each in

@each $var in $vars{

...

}

$colors:red orange yellow green blue lightgreen violet;

#app{
    height:200px;
}

@each $color in $colors{
    .block-#{index($colors,$color)}{
        background-color:$color;
        height: (100% / length($colors));
    }
}


.block-1 {
  background-color: red;
  height: 14.2857142857%;
}

.block-2 {
  background-color: orange;
  height: 14.2857142857%;
}

.block-3 {
  background-color: yellow;
  height: 14.2857142857%;
}

.block-4 {
  background-color: green;
  height: 14.2857142857%;
}

.block-5 {
  background-color: blue;
  height: 14.2857142857%;
}

.block-6 {
  background-color: lightgreen;
  height: 14.2857142857%;
}

.block-7 {
  background-color: violet;
  height: 14.2857142857%;
}


$condition: (success:green, warning:orange, error:red);


@each $key,$val in $condition {
   .alert-#{$key}{
       color: $val;
       background-color: black;
   } 
}


.alert-success {
  color: green;
  background-color: black;
}

.alert-warning {
  color: orange;
  background-color: black;
}

.alert-error {
  color: red;
  background-color: black;
}

while

while 条件{

}

$i:0;

@while $i!=5{
    $i:$i+1;
    .item-#{$i}{
        width:5px *$i;
    }
}


.item-1 {
  width: 5px;
}

.item-2 {
  width: 10px;
}

.item-3 {
  width: 15px;
}

.item-4 {
  width: 20px;
}

.item-5 {
  width: 25px;
}

自定义函数

$dark-mode:false;

$theme-mode:(light:rgb(255, 255, 255), dark:rgb(0, 0, 0));

@function color($mode) {
    $default: map-get($theme-mode, light);
    $res: map-get($theme-mode, $mode);

    @if $res==null {
        @return $default;
    }

    @return $res;
}


@if $dark-mode {
    body {
        background-color: color(dark);

        p {
            color: color(light);
        }
    }
}

@else {
    body {
        background-color: color(light);

        p {
            color: color(dark);
        }
    }
}

body {
  background-color: white;
}
body p {
  color: black;
}

/*# sourceMappingURL=%E8%87%AA%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B0.css.map */

警告

会在控制台出现

@function division($a,$b){
    @if b==0{
        // @warn "不合法的数据";
         @error "不合法的数据";
    }
    @return ($a / $b);
}

body{
    width: division(100,0);
}

文章作者: 凉拌西蓝花🥦

文章连结: https://lzfblog.cn/?p=259

微信扫一扫