sass学习笔记

朴灿烈づ我的快乐病毒、 2023-01-09 03:55 91阅读 0赞

### 文章目录 ###

*  css功能扩展
 *   *  嵌套规则
     *  父选择器&
     *  属性嵌套
 *  sassScript
 *   *  变量
     *  数据类型
     *   *  字符串
     *  插值语句
     *  变量定义！default
     *  @import
     *  @media
     *  @extend
     *  @extend-Only选择器
     *  在指令中延伸
 *  控制指令
 *   *  @if
     *  @for
     *  @each
     *  @while
 *  混合指令
 *   *  定义混合指令
     *  引用混合样式@include
     *  参数
     *  参数变量
 *  函数指令

# css功能扩展 #

## 嵌套规则 ##

sass允许将一套css样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，嵌套功能避免了重复输入父选择器

#main p{
        color: #00ff00;
        width: 97%;
        .redbox {
            background-color: #ff0000;
            color: #000000;
        }
    }

## 父选择器& ##

可以用&代表嵌套规则外层的父选择器

a {
        font-weight: bold;
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }

&必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器

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

## 属性嵌套 ##

有些css属性遵循相同的命名空间，比如font-size, font-family等，为了便于管理这样的属性，sass允许将属性嵌套在命名空间

# sassScript #

## 变量 ##

sassScript最普遍的用法就是变量，变量以美元符号开头，赋值方法与css属性的写法一样：

$width: 5em;
    #main { 
        width: $width;
    }

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加!global声明：

#main {
        $width: 5em !global;
        width: $width;
    }
    #sidebar {
        width: $width;
    }

## 数据类型 ##

SassScript支持以下的数据类型：

*  数字， 1，2，10
 *  字符串， 有引号字符串与无引号字符串，“foo”， “bar”, “baz”
 *  颜色， blue, \#04a3f9
 *  布尔型， true, false
 *  空值，null
 *  数组（list), 用空格或逗号作分隔符，1.5em 1em 0 2em, Helcetica, Arial, sans-serif
 *  maps，相当于js中的object, （key1: value1, key2: value2)

### 字符串 ###

sassscript支持有引号字符串和无引号字符串，编译css文件不会改变其类型，只有一种情况例外，使用\#\{\}时，有引号字符串将被编译为无引号字符串，这样便于mixin中引用选择器名

@mixin firefox-message($selector) {
        body.firefox #{$selector}:before {
            content: "Hi, Firefox users!";
        }
    }
    
    @include firefox-message(".header");

编译成

body.firefox .header:before {
        content: "Hi, Firefox users!";
    }

## 插值语句 ##

通过\#\{\} 插值语句可以在选择器或属性名中使用变量：

$name: foo;
    $attr: border;
    p.#{$name} {
        #{$attr}-color: blue;
    }

## 变量定义！default ##

可以在变量的结尾添加!default给一个未通过！default声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值

$content: "First content";
    $content: "Second content?" !default;
    $new_content: "First time reference" !default;
    
    #main {
        content: $content;
        new-content: $new_content;
    }

编译为

#main {
        content: "First content";
        new-content: "First time reference";
    }

**变量是null空值时将视为未被！default赋值**

$content: null;
    $content: "Non-null content" !default;
    
    #main {
      content: $content;
    }

编译为

#main {
      content: "Non-null content"; }

## @import ##

通常@import寻找sass文件并将其导入，在以下情况下，@import仅作为普通的css语句，不会导入任何sass文件。

*  文件扩展名是.css
 *  文件名以http://开头
 *  文件名是url()
 *  @import包含media queries

## @media ##

sassscript中允许在css规则中嵌套。如果@media嵌套在css规则内，编译时，@media将被编译到文件的最外层，包含嵌套的父选择器

.sidebar {
        width: 300px;
        @media screen and (orientation: landscape) {
            width: 500px;
        }
    }

编译为

.sidebar {
        width: 300px;
    }
    @media screen and (orientation: landscape) {
        .slidebar {
            width: 500px;
        }
    }

## @extend ##

@extend可以将一个选择器下的所有样式继承给另一个选择器

.error {
        border: 1px #f00;
        background-color: #fdd;
    }
    .seriousError {
        @extend .error;
        border-width: 3px;
    }

这样就会将error下的所有样式继承给seriousError

## @extend-Only选择器 ##

sass引入了"占位符选择器",计作%，当它们单独使用时，不会被编译到css文件中，定这套样式并不是给某个元素用，而是只通过@extend指令使用。

// 这条规则在单独使用的时候并不会被编译到css中
    #content a%extreme {
        color: blue;
    }
    
    .notice {
        @extend %extreme;
    }

编译成

#content a.notice {
        color: blue;
    }

## 在指令中延伸 ##

在指令中使用@extend时有一些限制，sass不可以将@media层外的css规则延伸给指令层内的css，这样会生成大量的无用代码。如下面例子是可行的：

@media print {
        .error {
            border: 1px #f00;
            background-color: #fdd; 
        }
        .seriousError {
            @extend .error;
            border-width: 3px;
        }
    }

但不可以这样：

.error {
        border: 1px #f00;
        background-color: #fdd;
    }
    @media print {
        .seriousError {
            @extend .error;
            border-width; 3px;
        }
    }

# 控制指令 #

## @if ##

当@if的表达式返回值不是false或者null时，条件成立，输出\{\} 内的代码：

p {
        @if 1 + 1 == 2 {border: 1px solid; }
        @if 5 < 3 {border: 2px dotted;}
        @if null {border: 3px double;}
    }

编译为  
`p { border; 1px solid;}`  
与别的语言相同的，也有else if和 if这些这里不过多说明

## @for ##

这个指令包含两种格式：  
`@for $var from <start> through <end>`  
`@for $var from <start> to <end>`

@for $i from 1 through 3 {
        .item-#{$i} {
            width: 2em * $i;
        }
    }

编译为

.item-1 {
        width: 2em;
    }
    .item-2 {
        width: 4em;
    }
    .item-3 {
        width: 6em;
    }

## @each ##

遍历数组，@each指令的格式是`$var in <list>`

@each $animal in puma, sea-slug, egret, salamander {
        .#{$animal}-icon {
            background-image: url('/images/#{$animal}.png');
        }
    }

## @while ##

@while指令重复输出格式直到表达式返回结果为false，这样可实现比@for更复杂的循环，只是很少会用到

$i: 6;
    @while $i > 0 {
        .item-#{$i} {
            width: 2em * $i;
        }
        $i: $i - 2;
    }

# 混合指令 #

混合指令（mixin)用于定义可重复使用的样式，避免了使用无语意的class

## 定义混合指令 ##

混合指令的用法是在@mixin后添加名称与样式

@mixin large-text {
        font: {
            family: Arial;
            size: 20px;
            weight: bold;
        }
        color: #ff0000;
    }

## 引用混合样式@include ##

使用@include指令引用混合样式，格式是在其后添加混合名称，以及需要的参数

.page-title {
        @include large-text;
        padding: 4px;
        margin-top: 10px;
    }

混合样式中也可以包含其他混合样式

@mixin compound {
        @include highlighted-background;
        @include header-text;
    }
    @mixin highlighted-background {
        background-color: #fc0;
    }
    @mixin header-text {
        font-size: 20px;
    }

## 参数 ##

参数用于给混合指令中的样式设定变量，并且赋值使用

@mixin sexy-border($color, $width) {
        border: {
            color: $color;
            width: $width;
            style: dashed;
        }
    }
    p{ @include sexy-border(blue, lin) }

混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值

@mixin sexy-border($color, $width: 1in) {
        border: {
            color: $color;
            width: $width;
            style: dashed;
        }
    }
    p {@include sexy-border(blue)}
    h1 {@icnlude sexy-border(blue, 2in)}

## 参数变量 ##

如果不能确定混合指令需要使用多少个参数，可以使用参数变量…声明

@mixin box-shadow($shadow...) {
        box-shadow: $shadow;
    }
    .shadows {
        @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
    }

编译为

.shadowed {
        box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
    }

# 函数指令 #

sass支持自定义函数，并能在任何属性值或者sassscript中使用

$grid-width: 40px;
    $gutter-width: 10px;
    
    @function grid-width($n) {
        @return $n * $grid-width + ($n - 1) * $gutter-width;
    }
    
    #sidebar { width: grid-width(5); }

小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/8fc8648d07ac4583be8f957898bf54a3.png