关于sass:Sass-使用

47次阅读

共计 6292 个字符，预计需要花费 16 分钟才能阅读完成。

sass 应用

一、sass 环境

1.sass 简述

Sass 是最早的 Css 预处理语言，采纳 Ruby 语言编写，Sass 从第三代开始，放弃了缩进式格调，并且齐全向下兼容一般的 Css 代码，这一代的 Sass 也被称为 Scss

2.sass 特点

不能间接在页面中解析，须要应用 ruby 事后翻译成 css 文件
Sass 性能更加弱小，领有流控语句等
齐全兼容 CSS3，在 CSS 语言根底上增加了扩大性能，比方变量、嵌套 (nesting)、混合 (mixin)

3.Sass & Scss

Sass 和 Scss 平时都称之为 Sass，是同一个货色。区别有两点：

文件后缀 (扩展名) 不同:
    Sass 以“.sasss”为扩展名，Scss 以“.scss”为扩展名；书写形式 (语法) 不同:
  Sass 以严格的缩进式语法规定来书写，不带大括号和分号;
  Scss 的书写形式和 Css 语法十分相似（越来越受欢迎起因之一）。

4. 解析 Sass

办法一：应用第三方编译工具 koala，官网：http://koala-app.com/
办法二：应用 vscode 插件：easysass，插件配置参考：https://marketplace.visualstu…

二、sass 语法

1. 变量

Sass 应用美元符号“$”来申明变量。Sass 的默认变量个别是用来设置默认值，而后依据需要来笼罩的，笼罩的形式也很简略，只须要在默认变量 之前 从新申明下变量即可。default: 升高变量的优先级（备胎）

代码中应用：

$fontSize:60px;
$bgColor:blue !default;   // 全局变量
$bgColor:skyblue;

body {
    font-size: $fontSize;
    background-color: $bgColor;
    div{
        $bgColor:red;   // 局部变量
        background-color: $bgColor;
    }
}

2.@import

Sass 扩大了 Css 的 @import 规定，让它可能引入 Scss 和 Sass 文件，合并并输入一个繁多的 Css 文件。被导入的文件中所定义的变量或 mixins 都能够在主文件中应用。

应用：

// test.scss
$bgColor:skyblue;

// index.scss
@import "test";
body {background-color: $bgColor;}

3. 嵌套

a. 选择器嵌套

选择器嵌套，默认是叠加后辈选择器

div {
    h3 {color: red;}
}
b. 属性嵌套
div {
    border: {       // 留神 body 前面有个英文冒号
        top:1px solid red;
        bottom:10px dotted blue;
    }
}
c. 伪类嵌套
div {
    &:hover {background-color: red;}
    &::after{content: "after";}
}

4. 代码复用

a. 混合宏
我的项目中有几处小款式相似，能够应用变量来对立解决。须要重复使用大段的款式时，变量就无奈达到目标了。这个时候就须要混合宏来搞定。@mixin 用来申明混合宏
@include 用来来调用申明好的混合宏。毛病：混合宏对于复用反复的代码块很不便，但它会生成冗余的代码块，雷同代码块不能智能合并。比方在不同的中央调用一个雷同的混合宏时。

应用：

@mixin after{       // 不带参数
    content: "after";
    display: block;
    background-color: red;
}

@mixin circle($radius:50px,$bgColor:skyblue){   // 带参数
    width: $radius;
    height: $radius;
    border-radius: 50%;
    background-color: $bgColor;
}
div{@include circle(50px,red);
    &::after{@include after;}
}
b. 继承
Sass 通过关键词 @extend 来继承已存在的类款式块，实现代码的继承。（能够解决混合宏不能智能合并雷同代码的毛病）
.btn{
    border: solid 1px #ccc;
    background-color: white;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 4px;
}
.btn-primary{
    @extend .btn;
    background-color: #33b735;  // 重写背景色彩
    color: white;
}
.btn-warnning{
    @extend .btn;
    background-color: #da3e3e;
    color: white;
}
//===> css
/*
/* 
.btn, .btn-primary, .btn-warnning {
  border: solid 1px #ccc;
  background-color: white;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 4px;
}

c. 占位符

Sass 的占位符 %placeholder 申明的代码，如果不被 @extend 调用的话，不会产生任何代码。防止了代码冗余的产生。
%popover{ // 不会保留的 css 中，因为未继承
    background-color: #33b735;
}

.btn-primary{// @extend %popover;}

区别总结

占位符独立定义，不调用时不产生任何代码；继承首先有一个基类存在，不论调用不调用，基类的款式都将会编译到 Css 代码中。

区别图示比拟：

5. 非凡变量类型

a.list
List 类型的取值, 语法 nth(list, index), 第一个参数示意要取谁的, 也就是 list 类型的变量的名称, 第二个示意索引

应用:

div {
    $div-padding: 1px 5px 10px 20px 30px 40px;
    padding: {top: nth($div-padding, 1);
        bottom: nth($div-padding, 4);
    }
}
b.map
Map 类型取值, 语法 map-get(map, key), 第一个参数示意要取谁的, 也就是 map 类型的变量的名称, 第二个参数示意要取的 key。

应用：

div {$color-map: (r:red, g:green, b:blue);
    color: map-get($color-map, r);
}

6.sass 运算

对 sass 中的数值进行计算，除法运算必须加括号，其它运算能够不加，然而倡议所有运算都加上括号

应用：

div {
    border: solid 1px + 3px - 1px red;
    padding-left: (1000px / 10);
    padding-top: 10px * 10;
}

7.sass 分支与循环

a.if 语句
@if 指令能够依据条件来解决款式块，条件为 true 返回一个款式块，false 返回另外款式块。除了 @if 之外，还能够配合 @else、@else if 应用。

应用：

@mixin show($boolean: true){
    @if $boolean {
        display: block;
        visibility: visible;
    }@else{
        display: none;
        visibility: hidden;
    }
}

div {@include show(true);
}
b.for 循环
  @for 循环有两种模式：@for $i from <start> through <end>    包含 end 这个数
    @for $i from <start> to <end>        不包含 end 这个数
循环内应用 #{$i}调用以后次循环变量，循环内应用函数或 mixin 时，不须要包装#{}，间接应用 $i；

应用：


ul {
    width: 500px;
    border: solid 1px red;

    li {
        background-color: red;
        margin: 10px 0;

        @for $w from 1 through 10 {&:nth-child(#{$w}) {width: #{$w}0%;
            }
        }
    }
}
c.each 循环 list
@each 循环就是去遍历一个列表，而后从列表中取出对应的值。@each $var in <list>, $var 是个变量名，<list> 返回一个列表值。变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的款式块。

应用：

ul {
    width: 500px;
    border: solid 1px red;

    $author-list: tony tian kevin;

    @mixin user-imgs {
        @each $author in $author-list{.photo-#{$author}{background-image: url("/imgs/#{$author}.jpg");
            }
        }
    }
    .author{@include user-imgs;} 
}

编译后的 css:

ul {
  width: 500px;
  border: solid 1px red;
}

ul .author .photo-tony {background-image: url("/imgs/tony.jpg");
}

ul .author .photo-tian {background-image: url("/imgs/tian.jpg");
}

ul .author .photo-kevin {background-image: url("/imgs/kevin.jpg");
}
d.while 循环
@while 循环和 @for 相似，前面的条件为 true 就会执行，并且会生成不同的款式块，直到表达式值为 false 时进行循环。

应用：

li {
        background-color: red;
        $types: 10;
        $type-width: 20px;
        
        @while $types > 0{&:nth-child(#{$types}) {
                width: $type-width * $types;
                $types: $types - 1;
            }
        }
    }

8. 函数

Sass 自备一系列的函数性能。还能够自定义函数。

可应用的函数：

字符串函数
unquote($string)：删除字符串中的引号；quote($string)：给字符串增加引号；To-upper-case()：将字符串小写字母转换成大写字母；To-lower-case()：将字符串转换成小写字母。数字函数
percentage($value)：将一个不带单位的数转换成百分比值；round($value)：将数值四舍五入，转换成一个最靠近的整数；ceil($value)：将大于本人的小数转换成下一位整数；floor($value)：将一个数去除他的小数局部；abs($value)：返回一个数的绝对值；min($numbers…)：找出几个数值之间的最小值；max($numbers…)：找出几个数值之间的最大值；random():                 获取随机数。列表函数
length($list)：返回一个列表的长度值；nth($list, $n)：返回一个列表中指定的某个标签值
join($list1, $list2, [$separator])：将两个列给连贯在一起，变成一个列表；append($list1, $val, [$separator])：将某个值放在列表的最初；zip($lists…)：将几个列表联合成一个多维的列表；index($list, $value)：返回一个值在列表中的地位值。Introspection 函数
type-of($value)：返回一个值的类型；unit($number)：返回一个值的单位；unitless($number)：判断一个值是否带有单位；comparable($number-1, $number-2)：判断两个值是否能够做加、减和合并。Opacity 函数
alpha($color) /opacity($color)：获取色彩透明度值；rgba($color, $alpha)：扭转色彩的透明度值；opacify($color, $amount) / fade-in($color, $amount)：使色彩更不通明；transparentize($color, $amount) / fade-out($color, $amount)：使色彩更加通明。Sass Maps 的函数
map-get($map,$key)：依据给定的 key 值，返回 map 中相干的值。map-merge($map1,$map2)：将两个 map 合并成一个新的 map。map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。map-keys($map)：返回 map 中所有的 key。map-values($map)：返回 map 中所有的 value。map-has-key($map,$key)：依据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。keywords($args)：返回一个函数的参数，这个参数能够动静的设置 key 和 value。Miscellaneous 函数（三元函数）if($condition,$if-true,$if-false)：条件成立时，返回的值为 $if-true，否则返回值为 $if-false。RGB 色彩函数
rgb($red,$green,$blue)：依据红、绿、蓝三个值创立一个色彩；rgba($red,$green,$blue,$alpha)：依据红、绿、蓝和透明度值创立一个色彩；red($color)：从一个色彩中获取其中红色值；green($color)：从一个色彩中获取其中绿色值；blue($color)：从一个色彩中获取其中蓝色值；mix($color-1,$color-2,[$weight])：把两种颜色混合在一起

HSL 函数
hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度 (saturation) 和亮度（lightness）的值创立一个色彩；hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和通明（alpha）的值创立一个色彩；hue($color)：从一个色彩中获取色相（hue）值；saturation($color)：从一个色彩中获取饱和度（saturation）值；lightness($color)：从一个色彩中获取亮度（lightness）值；adjust-hue($color,$degrees)：通过扭转一个色彩的色相值，创立一个新的色彩；lighten($color,$amount)：通过扭转色彩的亮度值，让色彩变亮，创立一个新的色彩；darken($color,$amount)：通过扭转色彩的亮度值，让色彩变暗，创立一个新的色彩；saturate($color,$amount)：通过扭转色彩的饱和度值，让色彩更饱和，从而创立一个新的色彩
desaturate($color,$amount)：通过扭转色彩的饱和度值，让色彩更少的饱和，从而创立出一个新的色彩；grayscale($color)：将一个色彩变成灰色，相当于 desaturate($color,100%);
complement($color)：返回一个补充色，相当于 adjust-hue($color,180deg);
invert($color)：反回一个反相色，红、绿、蓝色值倒过去，而透明度不变。

应用：

body{
    &::after{content: to-upper-case("haoyunlai");
        display: block;
        clear: both;
    }
}

9. 正文

// 单行正文
/* 多行正文 */

正文完
sass
发表至： sass
2022-05-16
 0
关于sass:css预编语言
关于sass:如何用less和sass生成paddingmargin的四个方向多个值
关于sass:行业前瞻丨中国SaaS市场将快速增长或形成小而美林立格局
关于sass:前端面试每日-31-第604天