knowledge-scss学习

1.前言

总结于此文章https://blog.csdn.net/Ed7zgeE9X/article/details/123058868?fromshare=blogdetail&sharetype=blogdetail&sharerId=123058868&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_linkhttps://blog.csdn.net/Ed7zgeE9X/article/details/123058868?fromshare=blogdetail&sharetype=blogdetail&sharerId=123058868&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link学习sass(scss)的使用，包括变量，嵌套规则，混合指令(mixin)，继承(@extend)，函数和流程控制等相关学习总结。

总结常用

2.语法嵌套规则

选择器嵌套

css 复制代码

.container {
    width: 1200px;
    margin: 0 auto;
    .header {
        .img {
            width: 100px;
            height: 60px;
        }
    }
}

属性嵌套

css 复制代码

.container {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

父选择器&

用& 代表嵌套规则外层的父选择器，scss在编译时会把&替换成父选择器名。

css 复制代码

.container {
    a {
        color: #333;
        &:hover {
             text-decoration: underline;
             color: #f00;
        }
    }
}

编译为css

css 复制代码

.container a {
    color:#333;
}
.container a:hover {
    text-decoration:underline;
    color:#F00;
}

使用&进行选择器名称拼接

css 复制代码

.main {
    color: black;
    &-sidebar { border: 1px solid; }
}

编译为css

css 复制代码

.main {
    color: black;
}
.main-sidebar {
    border: 1px solid;
}

3.变量

全局变量：声明在最外层的变量，可在任何地方使用；
局部变量：嵌套规则内定义的变量只能在嵌套规则内使用。

将局部变量转换为全局变量可以添加!global 声明。

css 复制代码

$color: red;
.container {
    $height: 500px;
    $font-size: 16px !global;
    font-size: $font-size;
    color: $color;
    height: $height;
}
.footer {
    /**$font-size使用!global 申明成全局变量了*/
    font-size: $font-size; 
    /**
    * Error: Undefined variable. 
    * $height是.container下的局部变量，无法在.footer下面编译
    */
    height:$height;
}

编译为css

css 复制代码

.container {
    font-size: 16px;
    color: red;
    height: 500px;
}
 
.footer {
     /**$font-size使用!global 申明成全局变量了*/
    font-size: 16px;
}

4.@mixin

混合指令（Mixin）用于定义可重复使用的样式。

标准形式

css 复制代码

@mixin mixin-name() {
    /* css 声明 */
}
// 使用
@include mixin-name;

可嵌套

css 复制代码

// 定义一个区块基本的样式
@mixin block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}
// 使用混入 
.container {
    .block {
        @include block;
    }
}

编译为css

css 复制代码

.container .block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}

参数形式

css 复制代码

// 定义块元素内边距
@mixin block-padding($top, $right, $bottom, $left) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}
 
// 按照参数顺序赋值
.container1 {
   @include block-padding(10px, 20px, 30px, 40px);
}
 
// 可指定参数赋值
.container2 {
   @include block-padding($left: 20px, $top: 10px, $bottom: 10px, $right: 30px);
}
 
// 可指定参数赋值，但是必须指定4个值，不能缺失
.container3 {
   @include block-padding($left: 10px, $top: 10px, $bottom: 0, $right: 0);
}

编译为css

css 复制代码

.container1 {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}
 
.container2 {
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 20px;
}
 
.container3 {
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
}

默认值

css 复制代码

// 定义块元素内边距，参数指定默认值
@mixin block-padding($top:0, $right:0, $bottom:0, $left:0) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}
 
// 可指定参数赋值
.container {
    /** 不带参数 */
    @include block-padding;
    /** 按顺序指定参数值 */
    @include block-padding(10px,20px);
    /** 给指定参数指定值 */
    @include block-padding($left: 10px, $top: 20px)
}

编译为css

css 复制代码

.container {
    /** 不带参数 */
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    /** 按顺序指定参数值 */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 0;
    padding-left: 0;
    /** 给指定参数指定值 */
    padding-top: 20px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
}

5.@function

@function用于封装复杂的操作，可以很容易地以一种可读的方式抽象出通用公式和行为，函数提供返回值，常用来做计算方面的工作。

标准形式与使用

css 复制代码

@function square($base) {
    @return $base * $base * 1px;
}
 
.sidebar {
    float: left;
    margin-left: square(4);
}

编译为css

css 复制代码

.sidebar {
    float: left;
    margin-left: 16px;
}

可选参数

css 复制代码

//change-color和hue是内置方法
//hue 返回$color的颜色为0到360度之间的一个数字。
//change-color 用于设置颜色的属性
@function invert($color, $amount: 100%) {
    //@error hue($color); 调试 210deg
    $inverse: change-color($color, $hue: hue($color) + 180);
    @return mix($inverse, $color, $amount);
}
 
$primary-color: #036;
.header {
    background-color: invert($primary-color, 80%);
}

编译为css

css 复制代码

.header {
    background-color: #523314;
}

指定参数

css 复制代码

$primary-color: #036;
.banner {
    //scale-color Fluidly scales one or more properties of .$color
    background-color: $primary-color;
    color: scale-color($primary-color, $lightness: +40%);
}

编译为css

javascript 复制代码

.banner {
    background-color: #036;
    color: #0a85ff;
}

可变参数

参数列表还可用于采用任意关键字参数，meta.keywords()函数采用参数列表

css 复制代码

@function sum($numbers...) {
    $sum: 0;
    @each $number in $numbers {
        $sum: $sum + $number;
    }
    @return $sum;
}
 
$widths: 50px, 30px, 100px;
.micro {
    width: sum($widths...);
}

编译为css

css 复制代码

.micro {
    width: 180px;
}

@renturn

@return只允许在@function内使用，和js一样，遇到return就会返回。

css 复制代码

@function red() {
    $is: true;
    @if $is {
        @return 'is';
    }
    @return red;
}
.con{
    color: red();
}

编译为css

css 复制代码

.con {
    color: "is";
}

6.@extend继承

继承已经存在的样式

多个@extend

css 复制代码

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}
 
.important {
    font-weight: bold;
    font-size: 14px;
}
.alert-danger {
    @extend .alert;
    @extend .important;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

编译为css

css 复制代码

.alert, .alert-danger {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}
 
.important, .alert-danger {
    font-weight: bold;
    font-size: 14px;
}
 
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

多层继承

css 复制代码

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}
 
.important {
    @extend .alert;
    font-weight: bold;
    font-size: 14px;
}
.alert-danger {
    @extend .important;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

编译为css

css 复制代码

.alert, .important, .alert-danger {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}
 
.important, .alert-danger {
    font-weight: bold;
    font-size: 14px;
}
 
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

占位符选择器`%`

常用的id 与 class选择器写法相似，只是 # 或 . 替换成了%，占位符选择器必须通过 @extend 指令调用。

使用占位符选择器操作

css 复制代码

.button %base {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}
        
.btn-default {
    @extend %base;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
 
.btn-danger {
    @extend %base;
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

编译为css

效果和类选择器一样，有个优点，占位符选择器%所属的样式未使用时，不会被编译到css文件中，

css 复制代码

.button .btn-danger, .button .btn-default {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}
 
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
 
.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

7.@use

从其它 scss样式表中加载mixin、function和变量，并将来自多个样式表的 css组合一起。scss提供内置模块，可以通过@use使用。

使用 @use '样式路径' as 名称

src/_corners.scss

css 复制代码

$radius: 3px;
@mixin rounded {
    border-radius: $radius;
}

index.scss

css 复制代码

@use "src/corners" as c;
.button {
    @include c.rounded;
    padding: 5px + c.$radius;
}

编译为css

css 复制代码

.button {
    border-radius: 3px;
    padding: 8px;
}

as*-全局命名空间

src/_corners.scss

css 复制代码

$radius: 3px;
@mixin rounded {
    border-radius: $radius;
}

index.scss

css 复制代码

@use "src/corners" as *;
 
.button {
    @include rounded;
    padding: 5px + $radius;
}

编译为css

css 复制代码

.button {
    border-radius: 3px;
    padding: 8px;
}

knowledge-scss学习

1.前言

2.语法嵌套规则

选择器嵌套

属性嵌套

父选择器&

3.变量

4.@mixin

标准形式

参数形式

默认值

5.@function

标准形式与使用

可选参数

指定参数

可变参数

@renturn

6.@extend继承

多个@extend

多层继承

占位符选择器%

7.@use

使用 @use '样式路径' as 名称

as*-全局命名空间

占位符选择器`%`