Sass 学习笔记

最新推荐文章于 2023-01-28 19:26:42 发布

wkjCsdn

最新推荐文章于 2023-01-28 19:26:42 发布

阅读量183

点赞数

分类专栏： sass|scss 文章标签： sass mysql

本文链接：https://blog.csdn.net/wkj1206/article/details/111632615

版权

sass|scss 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

`Sass` 学习笔记

`CSS` 功能扩展

嵌套规则

// css内容
#page .content {
	background: red;
}

// sass 嵌套的形式
#page {
    .content {
		background: red;
    }
}

这样的好处在于，可以将同一个父级标签中的所有内容都放在一个代码块中便于管理。

父选择器

// sass 内容
#main {
    color: black;
    &-sildebar {
        border: 1px solid #000;
	}
    &.is-active {
        background: red;
    }
}

// 编译的内容
#main {
    color: black;
}
#main-sildebar {
    border: 1px solid #000;
}
#main.is-active {
    background: red;
}

属性嵌套

// sass 内容
.funky {
    font: {
        family: fantasy;
        size: 30em;
        weight: bold;
	}
}

// 编译后的内容
.funky {
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold;
}

占位符选择器

定义代码块，以 % 开头，定义的代码块如果不通过 @extend 引用，将不会被编译。可以定义一些基类在需要使用到这些基类的地方直接引入，可以有效解决由于基类造成的代码冗余。

// sass 内容
%base {
    display: flex;
    justify-content: center;
    align-item: center;
}

.test1 {
	@extend %base;
}

// 编译得到的内容
.test1 {
    display: flex;
    justify-content: center;
    align-item: center;
}

注释

sass 中有多行注释和单行注释，其中单行注释在编译后不会输出，多行注释会在编译后完整输出。

/* 多行注释 */
// 单行注释

`SassScript`

变量

sass 变量以 $ 开头。

$width: 10px;
$width: 10px !default;	// 变量默认值，如果变量没有被定义就会使用此处值。

.content {
    width: $width;
}

数据类型

支持 6 种主要的数据类型：

数字，1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

运算

@Rules 与指令

@import，导入文件。要导入远程文件，可以使用 @import url(path) 来导入。
@media，媒体选择，可嵌套使用。
@extend，相当于继承，将继承的内容复制到使用 @extend 的位置。

控制指令

@if，条件指令，有多个选择时可以使用 @if @else-if @else
```
$test: true;
@if $test {
    
} @else {
    
}
```
@for，循环指令
@each，循环指令，可以遍历数组与map
@while，循环指令

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

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

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

混合指令

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

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

// 使用
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
a {
 	@include large-text;
}
// 使用参数
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

// 使用默认参数
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

// $shadows...表示所有的参数
@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

// 向混合央视中导入内容
@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

函数指令

（定义与使用函数）

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

`SassScript` 内置函数

字符串相关函数

quote，给字符串添加引号。
str-index，获取子字符串在字符串中第一次出现的位置。
str-insert，在字符串指定位置插入字符串。
str-length，获取字符串的长度。
srr-slice，截取字符串。
to-lower-case，将字符串转为小写。
to-upper-case，将字符串转为大写。
unique-id，返回一个无引号的随机字符作为iid（只能保证在单次Sass编译中的唯一性）。
unquote，移除字符串的引号。

数字相关函数

abs，返回绝对值。
ceil，向上取整。
comparable，判断 num1 与 num2 是否可以比较。
floor，向下取整。
max，返回数字列表中的最大值。
min，返回数字列表中的最小值。
percentage，将数字转换为百分比的表现形式。
random，random()，返回0-1之间的小数。random(Number)，返回1-Number之间的整数。
round，四舍五入。

list（数组）相关函数

append，将单个值插入到列表尾部。
index，返回指定元素的索引。
is-break，判断列表中是否含有中括号（is-brack([a b c]) ，返回，true）。
join，两个合并列表。
length，获取列表长度。
list-sep，返回一个列表元素之间的分隔符。
nth，获取指定项。
set-nth，设置指定项的值。
zip，将一个多维列表中的各个列表按照以相同索引为一组，重新组成一个新的多为列表。

Map 相关函数

map-get($map, $key)，返回 map 中指定 key 的值
map-merge($map1, $map2)，合并两个 map
map-remove($map, $key)，删除 map 中指定的值，返回已经删除掉指定值的新 map，如果指定值不存在则返回它本身
map-keys($map)，返回指定 map 的 key
map-values($map)，返回指定 map 的 value
map-has-key($map, $key)，判断 map 中是否含有指定的 key

选择器相关函数

is-superselector，比较两个选择器匹配的范围，前面的是否包含后面的。是，返回true；否，返回false
```
is-superselector("div", "div.myInput")
```
结果：true
```
is-superselector("div.myInput", "div")
```
结果：false
```
is-superselector("div", "div")
```
结果：true
selector-append，将后面的添加到前面的选择器中
```
selector-append("div", ".myInput")
```
结果：div.myInput
```
selector-append(".warning", "__a")
```
结果：.warning__a
selector-extend，
selector-nest，根据选择器列表生成嵌套选择器列表。
```
selector-nest("ul", "li")
```
结果：ul li
```
selector-next(".warning", "alert", "div")
```
结果：.warning div, alert div
selector-parse，将字符串的选择符转换为选择器队列
```
selector-parse("h1 .myInput .warning")
```
结果：('h1' '.myInput' 'warning')
selector-replace，替换一个选择器中的指定项
```
selector-unify("p.warning", "p", "div")
```
结果：div.warning
selector-unify，将两组选择器合成为一个复合选择器，如果两个选择器无法合成，则返回null。
```
selector-unify("myInput", "disabled")
```
结果：myInput.disabled
```
selector-unify("p", "h1")
```
结果：null
simple-selectors(selectors)，将合成选择器拆为单个选择器
```
simple-selectors("div.myInput")
```
结果：div,.myInput

颜色相关函数

分为三个部分：颜色设置、颜色获取以及颜色操作。

颜色设置：

rgb，
rgba，

hsl，通过色相、饱和度和亮度创建一个颜色。

hsl(120, 100%, 50%);	// 绿色
hsl(120, 100%, 75%);	// 浅绿色
hsl(120, 100%, 25%);	// 暗绿色
hsl(120, 100%, 70%);	// 柔和绿

hsla，通过色相、饱和度、亮度、透明度创建一个颜色

hsla(120, 100%, 50%, 0.3);	// 绿色带透明
hsla(120, 100%, 75%, 0.3);	// 浅绿色带透明

grayscale，将一个颜色弊案威灰色，相当于 desaturate(color, 100%)
```
graycale(#7fffd4);·	// #c6c6c6
```
complement，返回一个补充色
```
complement(#7fffd4);	// #ff7faa
```
invert，返回一个反色相（r、g、b 的值倒过来，透明度不变）。
```
invert(white);	// black
```

颜色获取：

red，从颜色中取红色值。
green，从颜色中去取绿色值。
blue，从颜色中取蓝色值。
hue，从 hsl 颜色中获取角度值。
saturation，从一个颜色中取饱和度。
lightness，从一个颜色中取亮度值。
alpha，
opcity，从一个颜色中取透明度。

颜色操作：

mix，将两个颜色混合。

mix(col1, col2, weight);

weight，表示混合时第二个颜色所占比例，默认为：50%
adjust-hue，通过改变颜色的色相值来创建新的颜色（色相值 -360deg-360deg ）。

adjust-color，调整给定色彩的某些属性。

adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)

change-color，根 adjust-color 功能类似。只是在该函数中传入的参数将直接替换原来的值，而不做任何的运算。
```
change-color(color, red, green, blue, hue, saturation, lightness, alpha)
```

scale-color，调整给定颜色的某些属性（按百分比）。

adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)

lighten，调整颜色亮度，让颜色变亮。
darken，调整颜色亮度，让颜色变暗。
saturate，提高传入颜色的色彩饱和度。等同于 adjust-color(color, saturation, amount)
desaturat，调整颜色的饱和度。等同于 adjust-color(color, alpha, amount)
opactify，降低颜色饱和度，取值在0-1之间。相当于 adjust-color(color, alpha, amount)
fade-in，降低颜色饱和度。相当于 adjust-color(color, alpha, amount)
transpare，fade-out，提高颜色饱和度。相当于 adjust-color(color, alpha, -amount)

Introspection 相关函数

此系列函数一般用于调试。

call(function, arguments...)，函数的动态调用，并返回执行结果。
content-exists() ，查看当前混入是否传递 @content 块。
feature-exists(feature)，检测当前的 Sass 实现是否支持该特性。
```
feature-exists("ar-error"); ·	// true
```
function-exists(functionname)，检测指定函数是否存在。
```
function-exists("nonsense");	// true
```
get-function(functionname, css: false)，返回指定函数。如果 css 为 true ，则返回纯 CSS 函数。
global-variable-exists(variablename)，检测某个全局变量是否存在。
```
variable-exists(a);		//true
```
inspect(value)，返回一个字符串的表示形式，value 是一个 sass 表达式。
mixin-exists(mixinname)，检测指定混入mixinname是否存在。
```
mixin-exists("important-text");	// true
```
type-of(value)，返回值类型。取值为：number，string，color，list，map，bool，null，function，arglist。
```
type-of(15px);	// number
type-of(#ff0000);	// color
```
unit(number)，返回传入数字的单位（复合单位）。
```
unit(15px);	// px
```
unitless(number)，判断传入的数字是否带有单位。
```
unitless(15px);	// false
unitless(15);	// true
```
variable-exists(variablename)，判断变量是否存在于当前作用域。
```
variable-exists(b);	// true
```

wkjCsdn

关注

0
点赞
踩
0

收藏

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

Sass 学习笔记CSS 功能扩展嵌套规则// css内容#page .content { background: red;}// sass 嵌套的形式#page { .content { background: red; }}这样的好处在于，可以将同一个父级标签中的所有内容都放在一个代码块中便于管理。父选择器// sass 内容#main { color: black; &-sildebar { border: 1p
复制链接

扫一扫