关于 sass 学习的记录

計忆
155 阅读3分钟

嵌套

font-size: 12px;  
color: #333333;  

.top {  
    border: 1px solid red;  
    // todo &-left 编译出来是 .top-left  
    &-left {  
        width: 200px;  
    }  
}  

.a {  
    color: #333333;  
    // todo 编译结果 font-size: 12px;font-weight: bold;  
    // todo 嵌套属性，将相同属性进行拆分  
    font: {  
        size: 12px;  
        weight: bold;  
    };  
}  

// todo 占位符选择器 %foo 不会被编译  
// todo 用法：<button class="btn-success default">按钮</button>  
.default%foo {  
    background: red;  
    width: 100px;  
}  

.btn-success {  
    @extend %foo;  
    border: 1px solid green;  
}

变量

sass 变量的定义规则

变量以美元 ($) 开头，后面跟变量名；  
变量名是 “不” 以数字开头的，可包含字母、数字、下划线、横线（连接符）；  
写法彤 css，即变量名和值之间用冒号 (:) 分割；  
变量一定要先定义，后使用；

变量的作用域：

1、局部变量：只能在当前作用域内进行使用；  
2、全局变量：

变量值的类型：

sass 支持 6 种主要的数据类型  
1、数字：1、2、13、10px  
2、字符串：有引号字符串与无引号字符串，“foo” ‘bar’ baz  
3、颜色：blue、#000000、rgba(155,0,0,0.5)  
4、布尔型：true、false  
5、空置：null  
6、数组（list）：用空格或逗号进行分割，1.5em 1em 0.2em, 1,2,3  
7、maps：相当于 JavaScript 的 object （key1：value，key2：value2）

$color: 'red'; // todo 全局变量的第一种写法，定义在全局  
$color: 'green' !default; // 如果 $color 之前没定义，使用该默认值  
$layer-index: 10;  
$border-width: 3px;  
$font-base-family: 'Open Sans', Helvetica, Sans-Serif;  
$top-bg-co1or: rgba(255, 147, 29, 0.6);  
$block-base-padding: 6px 10px 6px 10px;  
$blank-mode: false;  
$var: null; // 值nul1是其类型的唯一值。它表示缺少值，通常由图数返回以指示缺少结果。  
$color-map: (color1:#fa0080, color2:#fbe208, color3:#95d7eb);  
$fonts: (serif:"Helvetica Neue", monospace:"Consolas");  

.containers {  
    // todo 全局变量的第二种写法，后面加 !global  
    $font-size: 16px;  
    font-size: $font-size;  
    @if $blank-mode {  
        background-color: #000;  
    } @else {  
        background-color: #fff;  
    }  
    content: type-of($var);  
    content: length($var);  
    color: map-get($color-map, color2);  
    background: $color;  

    .footer {  
        font-size: $font-size;  
    }  
}  

// 如果列表中包含空值，则性成的c5s中将忽略空值。  
.wrap {  
    font: 18px bold map-get($fonts, "sans");  
}  

.text {  
    color: $font-base-color;  
}

混入：mixin

1、mixin 是可以重复使用的一组 css 声明。  
2、mixin 有助于减少重复代码，只需声明一次，就可在文件中引用。  
3、混合指令可以包含所有的 css 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。  
4、使用参数时建议加上 默认值。

// todo 第一种混入方式  
@mixin warn {  
    border: 1px solid blue;  
}  
// todo 嵌套混入  
@mixin warring-text {  
    background: red;  
    .warn-text {  
        background: green;  
    }  
}  

// todo 指定默认值  
@mixin block-padding($top:0,$right:0,$bottom:0,$left:0) {  
    padding: {  
        top: $top;  
        right: $right;  
        bottom: $bottom;  
        left: $left;  
    };  
}  
/**  
* 定义线性渐变  
* $direction 方向  
* $gradients 颜色过度的值列表，是一个伪数组  
*/  
@mixin linear-gradient($direction,$gradients...) {  
    // todo nth($gradients, 2) 第一个参数：数组，第二个参数：数组里面的第几项  
    background-color: nth($gradients, 2);  
    background-image: linear-gradient($direction, $gradients);  
}  

.container {  
    @include warn;  
    @include warring-text;  
    // todo 指定参数传参，设置为 null 便不会生成样式  
    @include block-padding($top: 10px, $bottom: 20px, $right: null);  
    @include linear-gradient(to right, red, green, blue)  
}

继承：extend

// todo % 占位符选择器，解决父类最终不会被编译出来的问题  
%important {  
    font-weight: bold;  
    font-size: 14px;  
}  

%alert {  
    padding: 15px;  
    margin-bottom: 20px;  
    border: 1px solid transparent;  
    border-radius: 4px;  
    font-size: 12px;  
    // 实现多继承  
    @extend %important;  
}  

.alert-info {  
    @extend %alert;  
    background-color: #e6f7ff;  
    color: #1890ff;  
    border-color: #91d5ff;  
}

sass 运算符：Operations

 
/*  
* 等号操作符  
1、==：等于  
2、!=：不等于  
*/  
$theme: 6;  

.container {  
    @if ($theme == 1) {  
        background: red;  
    } @else {  
        background: blue;  
    }  
}  

/*  
* 关系（比较）运算符  
1、< (lt)：小于  
2、> (gt)：大于  
3、<= (lte)：小于等于  
4、>= (gte)：大于等于  
注意：不可以用字符串，只能用数字  
*/  
.container2 {  
    @if ($theme >= 5) {  
        background: red;  
    } @else {  
        background: blue;  
    }  
}  

/*  
* 逻辑运算符  
1、and：逻辑与  
2、or：逻辑或  
3、not：逻辑非  
*/  
$width: 100;  
$height: 100;  
$last: false;  
$index: 10;  

div {  
    @if ($width > 50 and $height < 300) {  
        font-size: 16px;  
    } @else {  
        font-size: 14px;  
    }  
    @if (not ($index > 5)) {  
        border-color: red;  
    } @else {  
        border-color: blue;  
    }  
}  

/*  
* 数字操作符  
1、+ ：加  
2、- ：减  
3、* ：乘  
4、/ ：除  
5、% ：取模  
*/  

.num {  
    /* ============== + 运算 ================== */  
    width: 50+20;  
    width: 50+20%;  
    width: 50%+20%;  
    width: 50+20px;  
    width: 50px+20px;  
    width: 10px+10pt;  
    /* ============== / 运算 ================== */  
    width: round($number:50) / 2;  
    width: 10 / 5;  
    width: (math.div(10, 5));  
}

插值表达式

/**  
    插值语句  
    选择器、属性名、属性值、注释。。。  
*/  
$font-size: 12px;  
$line-height: 30px;  

p {  
    font: 12px/30px "Helvetica Neue";  
    font: #{$font-size}/#{$line-height} "Helvetica Neue";  
}  

$class-name: dander;  
$attr: color;  

a.#{$class-name} {  
    border-#{$attr}: #4a90e1;  
}

常见函数的基本使用

 
.color {  
    $color: #52c41a;  
    .p0 {  
        background: $color;  
    }  

    .p1 {  
        /**  
        todo 让颜色变亮  
        lighten($color, $amount)  
        $amount 的取值在 0% - 100% 之间  
        */  
        background: lighten($color, 30%); 
        
        // todo 让颜色变暗，通常使用 color.scale 代替该方案  
        background: darken($color, 30%); 
        
        // todo 降低颜色透明度，通常使用 color.scale 代替该方案  
        background: opacify(rgb($color, 0.1), 0.5);  
    }   
}  

// todo 字符串函数  
.string {  
    &:after {  
        // todo quote() 有引号字符串，编译为 content: "这是里面的内容";  
        content: quote(这是里面的内容);  
    }  

    // todo unquote() 无引号字符串，编译为 background-color: #F00;  
    background-color: unquote($string: '#F00');  
    // todo str-length() 字符串的长度，编译为 z-index: 6;  
    z-index: str-length('sass学习');  
}  

// todo 数字函数  
.math {  
    z-index: abs($number: -25); // todo 返回绝对值，编译为 25  
    z-index: ceil(5.8); // todo 向上取整  
    z-index: max(5, 1, 6, 8, 3); // todo 获取最大值  
    opacity: random(); // todo 随机 0 - 1  
}  

// todo List 函数  
.list {  
    z-index: length(12px); // todo length() 返回列表长度  
    z-index: length(12px 5px 8px);  
    z-index: index(a b c d, c); // todo index 查找指定的值，在数组中的位置  
    padding: append(10px 20px, 30px); // todo append 在列表末尾添加一个值  
    color: nth($list: red blue green, $n: 2); // todo nth() 返回列表中的待定项  
    background: join(blue red, green yellow); // todo 将两个数组链接在一起 
}  

// todo Map 函数  
.map {  
    $font-size: ("small":12px, 'normal':18px, 'large':24px);  
    $padding: (top:10px, right:20px, bottom:10px, left:30px); 
    
    font-size: map-get($font-size, 'normal'); // todo map-get() 根据键值获取 map 中的对应值；  
    // todo map-has-key() 判断 map 里面是否包含指定的 key  
    @if map-has-key($padding, 'right') {  
        padding-right: map-get($padding, 'right');  
    }  

    &:after {  
        // todo map-merge() 将两个 map 合并成一个新的 map，map-values() 映射中的所有值  
        content: map-keys($font-size) + " " + map-values($padding)+"";  
    }  
}

sass 流程控制指令：@if @for @each @while

$theme: 'red';  
@if ($theme == 'red') {  
    color: red;  
} @else if ($theme == 'blue') {  
    color: blue;  
} @else {  
    color: green;  
}  
@mixin triangle($direction:top,$size:30px,$border-color:black) {  
    width: 0;  
    height: 0;  
    display: inline-block;  
    border-width: $size;  
    border-#{$direction}-width: 0;  
    @if ($direction == top) {  
        border-color: transparent transparent $border-color transparent;  
        border-style: dashed dashed solid dashed;  
    } @else if ($direction == right) {  
        border-color: transparent transparent transparent $border-color;  
        border-style: dashed dashed dashed solid;  
    } @else if ($direction == bottom) {  
        border-color: $border-color transparent transparent transparent;  
        border-style: solid dashed dashed dashed;  
    } @else if ($direction == left) {  
        border-color: transparent $border-color transparent transparent;  
        border-style: dashed solid dashed dashed;  
    }  
}  

.p0 {  
    @include triangle()  
}  

.p1 {  
    @include triangle(right, 20px, red)  
}  

.p2 {  
    @include triangle(bottom, 20px, green)  
}  

.p3 {  
    @include triangle(left, 20px, yellow)  
}

for 循环指令

.for {  
    // todo 生成的数据不带 4  
    @for $i from 1 to 4 {  
        .p#{$i} {  
            width: 10px * $i;  
            height: 30px;  
            background: red;  
        }  
    }  
    // todo 生成的数据带 4  
    @for $i from 1 through 4 {  
        .p-#{$i} {  
            width: 10px * $i;  
            height: 30px;  
            background: red;  
        }  
    }  


    @keyframes loading {  
        0% {  
            opacity: 0.3;  
            transform: translateY(0px);  
        }  
        50% {  
            opacity: 1;  
            transform: translateY(-20px);  
        }  
        100% {  
            opacity: 0.3;  
            transform: translateY(0px);  
        }  
    }  

    #loading {  
        position: fixed;  
        top: 200px;  
        left: 46%;  

        span {  
            position: absolute;  
            width: 20px;  
            height: 20px;  
            background: #3498db;  
            opacity: 0.5;  
            border-radius: 50%;  
            animation: loading 1s infinite ease-in-out;  
            @for $i from 1 to 6 {  
                &:nth-child(#{$i}) {  
                    left: 20 * ($i - 1 )+ px;  
                    animation-delay: calc(20 * ($i - 1) / 100) + s;  
                }  
            }  
        }  
    }  
}

each 指令

.each {  
    p {  
        width: 10px;  
    }  

    $color-list: red green blue yellow orange;  
    @each $color in $color-list {  
        // todo 获取当前项的索引值  
        $index: index($color-list, $color);  
        // todo 变量进行操作符，必须加空格  
        .p#{$index - 1} {  
            background: $color;  
        }  
    }  
}

while 指令

.while {  
    $column: 12;  
    @while $column > 0 {  
        .col-sm-#{$column} {  
            width: calc($column / 12) * 100%;  
            width: calc($column / 12) * 100#{'%'};  
            width: unquote($string: calc($column / 12) * 100 + '%');  
        }  
    }  
    // todo 跳出循环，避免死循环  
    $column: $column - 1;  
}

function 的使用

function 的使用，把一些比较复杂或者经常用到的内容进行抽离（封装），以便重复调用  
混入 mixin 和函数 function 的区别:
    1、混入 mixin 主要是通过传递参数的方式输出多样化的样式，为了可以实现代码服用。  
    2、函数的功能主要是通过传递参数后，经过函数内部的计算，最后 @return 输出一个值。

.function {  
    .func1 {  
        // todo 固定传参  
        @function background-linear-gradient($direction,$start-color,$end-color:blue) {  
        // todo 只允许在 @ 函数体内使用，并且每个 @function 必须以 @return 结束，当遇到 @return 时，它会立即结束函数并返回其结果；  
            @return linear-gradient($direction, $start-color, $end-color)  
        }  
        // todo 正常传参  
        background-image: background-linear-gradient(to right, blue, green);  
        // todo 省略默认值  
        background: background-linear-gradient(to right, blue);  
        // 按照 key 进行传参  
        background: background-linear-gradient($start-color: red, $direction: to right);  
    }  

    .func2 {  
        // todo 任意传参  
        @function background-linear-gradient($direction,$gradients...) {  
            // todo 只允许在 @ 函数体内使用，并且每个 @function 必须以 @return 结束，当遇到 @return 时，它会立即结束函数并返回其结果；  
            @return linear-gradient($direction, $gradients)  
        }  
        // todo 正常传参  
        background-image: background-linear-gradient(to right, blue, green, red);  
    }  
}

三元表达式 if 的使用

用法：if($condition,$if-true,$if-false)
判断 $condition，如果条件成立，则返回 $if-true，如果条件不成立，则返回 $if-false 的结果

.if {  
    $theme: 'lignt';  
    color: if($theme == 'lignt', red, green);  
}
avatar
文章
阅读
粉丝