Sass笔记

最新推荐文章于 2024-04-23 11:04:30 发布

Ma_programmer

最新推荐文章于 2024-04-23 11:04:30 发布

阅读量679

点赞数 4

文章标签： css sass

本文链接：https://blog.csdn.net/ma_programmer/article/details/118105520

版权

一、变量格式--$

二、变量类型

三、变量作用域

四、引用规则--@import

五、变量运算

六、Mixin（混合宏）--@mixin

七、Sass继承---@extend

八、Sass嵌套

九、Sass条件控制--@if/@else if/@else

十、Sass循环控制--@for/@while/@each

十一、Sass内置函数

变量格式--$

1. 变量定义：$自定义名字：值 $width：100px

默认变量定义：$自定义名字：值 !default $color：red !default

注：变量定义可以在任何地方，只要考虑到作用域调用的问题就行

2. 变量调用：在值的位置直接使用定义的变量

width：$width

color：$color

变量类型

1. number：$width:100px

2. string：$src：’hello.jpg’ $strNoQout：ABC

注：字符串拼接可以使用‘+’，可以用#{ },第二种可以直接放在‘ ’中。

3. color：$color：red $color：#e6e6e6

4. array：$list:（100px,200px,3,red,#e6e6e6）

width：nth($list，1) //从1开始，选择数组的第几项

zoom：index($list，“#e6e6e6”) //找到当前项的下标

5. map：$map：(key:value…)

$map：(width:100px,height:100px,color:red)

width：map-get($map，width)

color：map-get($map，color)

变量作用域

作用域和js作用域相同

引用规则--@import

1. 如果以.css http:// url( ) media queries 形式出现，直接引用，不会合并引用。

@import ‘base.css’

@import ‘url(base.css)’

2. 引用.scss文件，合并成一个.css文件

使用Partials规则，创建.scss文件时，以 _xxx.scss的文件命名形式定义，引用时直接去掉下划线和后缀名。

创建：_base.scss

引用：@import ‘base’

注：@import不会变量提升，在引用时的位置也是编译成.css文件时编译成功的位置，如果对于引用文件的存在相同变量名，就要考虑到引用位置不同所导致的变量覆盖的问题。解决办法：加 ! default

变量运算

1. 加法

$num1：100px

$num2：200px

$width：$num1 + $num2

width：$width

2. 减法

$num1：100px

$num2：200px

$width：$num2 - $num1

width：$width

3. 乘法

width：(100px*5); //单位只要写一个就行

height：$width*2;

4. 除法

width：(100px/5); //单位只要写一个就行

height：$width/2;

5. 颜色加减

$color1：#010203

$color2：#040506

color：$color1 + $color2; //已过时，不建议用

6. mix混合色

$color1：#010203

$color2：#040506

color：mix($color1，$color2);

color：red($color1); //color1颜色的红色色值

color：green($color1); //color1颜色的绿色色值

注：Sass支持混合运算 left：(5px + 8px/2)

Mixin（混合宏）--@mixin & @include

1. mixin用来自定义一个语法块，相当于抽离封装一个css语法块。

// 定义
@mixin helloWorld {
    width: 100px;
    height: 100px;
    border: {
        top: 1px solid red;
        bottom: 2px solid yellow;
    }
}
// 使用
.div {
    @include helloWorld
}

2. Mixin可以嵌套使用

// 定义
@mixin helloWorld {
	width: 100px;
    height: 100px;
    border：{
    	top: 1px solid red;
    	bottom: 2px solid yellow;
    }
}

@mixin helloworld2 {

        padding: 10px;

        @include helloworld;

}
// 使用
.div {
    @include helloWorld2 
}

注：嵌套的mixin不会合并css样式，而是都给编译出来，所以尽量不要有重复的样式，会被覆盖掉。

3. mixin可以传入参数

// 定义
@mixin helloworld3($color, $width){
    border: {
        color: $color;
        width: $width;
        style: solid;
    }
}
// 使用
.div{
    @include helloWorld3(red, 10px)
}

Sass继承---@extend

1. 简单继承

.div { width: 100px; color: red; }

.divCopy { @extend .div; height: 200px; }

2. 关联属性继承

.div { width: 100px; color: red; }

.div .other { border: 1px solid red; }

.divCopy { @extend .div; height: 200px; }

注：.divCopy会继承 .div 和 .other 两个的全部样式

3. 链式继承

.div { width: 100px ; color: red; }

.div1 { @extend .div; border: 1px solid red; }

.divCopy { @extend .div1; height: 200px; }

注：.divCopy会继承 .div 和 .div1 两个的全部样式，重复的样式也会显示出来，因此要注意样式优先级覆盖的问题。

4. 伪类继承

a:hover { color : red; }

.hoverLink { font-Size : 15px; @extend :hover }

编译结果：

a:hover, a. hoverLink { color : red; }

.hoverLink { font-Size : 15px; }

继承的类会作用在原来的标签上，相当于在原来的标签上加一个样式类。

Sass嵌套

1. 选择器嵌套

.div {
    width: 100px;
    height: 200px;

    .div2 {
        color: red;

        .div3 {
            font-size: 12px;
        }
    }

    a {
        text-direction: underline
    }

}

.div2，a是 .div的子元素, .div3是 .div2的子元素

2. 属性嵌套

凡是带有“-”的样式都可以写成嵌套的样式：

padding：{

left: 10px;

top: 20px;

}

Sass条件控制--@if/@else if/@else

1. 判断标签内部的样式：

$type: 1;
p{
    @if $type == 1 {
        color: red;
    } @else if $type == 2 {
        color: green;
    } @else {
        color: black;
    }
}

2. 判断整个标签的样式：

$type: 1;
@if $type == 1 {
    .div {
        width: 100px;
        color: red;
    }
} @else if $type == 2 {
    .div {
        width: 200px;
        color: yellow;
    }
} @else {
    p {
        width: 100px;
        color: red;
    }
}

Sass循环控制--@for/@while/@each

1. @for

// 限定次数
// through
@for $i from 1 through 3{
    .item#{$i} {
        width: 100px * $i;
    }
}

// to
@for $i from 1 to 3{
    .item#{$i} {
        width: 100px *$i;
    }
}

// 循环变量
$list: (1, 2, 3, 4);

@for $i from 1 to length($list) {
    .item#{$i} {
        width: 100px *$i;
    }
}

注：through会包含边界最大值，to不会包含边界最大值

2. @while

$i: 4;

@while $i>0 {
    .item#{$i} {
        width: 100px *$i;
    }
    $i: $i-1;
}

3. @each(遍历,多结合$map)

$map: (width: 100px, height: 100px, color: red;)

.div{
    @each $key, $value in $map {
        #{$key}: $value;
    }
}

Sass内置函数

@debug 调试日志文件

1. number类型

percentage($number)：数字转换成百分比
round($number)：四舍五入
ceil($number)：向上取整
floor($number)：向下取整
abs($number)：取绝对值
min($number, $number2…)：取最小值
max($number, $number2…)：取最大值
random(number)：随机数，number为随机数的上限

2. 字符串类型

str-length($str)：获取字符串长度
unquote($str)：去除字符串的引号
quote($str)：添加引号
str-insert($str, $insert, $index)：在$index位置插入字符$insert
str-index($str, $substring)：返回指定字符在字符串的位置
to-upper-case($str)：转换成大写
to-lower-case($str)：转换成小写

3. 数组类型

length($list)：获取数组长度
nth($list, $index)：获取第index下标的元素
set-nth($list, $index, $value)：替换指定下标的元素
join($list1, $list2)：数组拼接
append($list, $val, […, …, …])：从数组尾部添加元素
index($list, $value)：返回元素在数组中的位置

4. map类型

map-get($map, $key)：返回map中对应key的值
map-merge($map1, $map2)：合并map
map-remove($map, $key)：删除map中一个key，返回一个新的map
map-keys($map)：返回map中所有的key
map-values($map)：返回map中所有的value
map-has-key($map, $key)：判断map中是否有给定的key的value值，返回Boolean值
keywords($args)：返回一个函数的参数，这个参数可以动态设置key和value，相当于js中的arguments，常配合mixin使用

5. 自定义函数--@function

@function createFun（$arg1, $arg2, …）{

//定义变量

//逻辑编写

@return …

}

例：

@function createFun（$px）{

$rem: 37.5px;

@return ($px / $rem) + rem;

}

Ma_programmer

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Sass笔记

目录一、变量格式--$二、变量类型三、变量作用域四、引用规则--@import五、变量运算六、Mixin（混合宏）--@mixin七、Sass继承---@extend八、Sass嵌套九、Sass条件控制--@if/@else if/@else十、Sass循环控制--@for/@while/@each十一、Sass内置函数变量格式--$1. 变量定义：$自定义名字：值 $width：100px 默认变量定义：$自定义名...
复制链接

扫一扫