sass
2024-05-08 10:22:56 0 举报AI智能生成
SASS（Syntactically Awesome Style Sheets）是一种高级CSS预处理器，允许使用更简洁、可读性和可维护性的语法编写CSS。SASS文件通常具有.scss扩展名，它允许使用嵌套规则、变量、混合和继承等功能，使CSS更加结构化和易于管理。虽然SASS文件在浏览器中不能直接被解析，但是它可以被编译成常规的CSS文件，用于网页的样式设计。因此，SASS为开发者提供了更高级的CSS编写方式，使得CSS的编写和维护变得更加高效。
作者其他创作
大纲/内容
1.变量
变量命名 连接符建议使用‘-’
2.嵌套
css代码
scss代码
2-1嵌套规则
父选择器标识符 &
在代码块中&符号就是指代了当前的父选择器
并且不会再被父选择器包裹
群组选择器（也支持）
代码
支持 + > ~等选择器
属性的嵌套(适用于margin-left padding-left 等)
3.导入
@import
一般把只用引入的sass文件 称为局部文件 文件名可以使用下划线开头 而import的时候可以忽略下划线
原生的css import (会多一个http请求 只有import进来了才会执行css) 所以不要引入css文件
!default降低优先级
同一个变量被赋值 最后只会用最后的那个值
如果后面的单个变量使用了!defalut 则不会覆盖前面的值
嵌套导入（在局部css代码块里导入）
4.注释
5.混合器
何时使用混合器
变量只是复用变量值 而当我们需要复用大段css代码时候就需要使用混合器
不要滥用混合器 当感觉可以给这个混合器合适命名的一般就是比较合理的混合器
使用
定义 @mixin
引用 @include
混合器传参
定义mixin
使用
遵守传参顺序
自定义传参顺序
默认值
6.继承
@extend
选择器继承 @extend 选择器
也可以继承复杂的选择器
多个继承 除了可以多次使用@extend 也可@extend 选择器,选择器 （用逗号隔开）
局限性
不支持 > + ~ 下级选择器 （不支持有空格好像）
比较几种写法
一
二
有%号的继承(相当于替换 将%替换为继承它的css) 不会被编译css
作用域问题 当使用@medita 等选择器的时候 只能继承一起被@meidia包裹的选择器
7.函数
内置函数
字符串函数
unquote() 删除字符串中的引号
quote() 给字符串添加引号
数字函数
percentage() 将一个不带单位的数转换成百分比值
round() 四舍五入
ceil() 天花板
floor()
abs() 绝对值
min(...numbers) 几个数中的最小值
max(...numbers) 几个数中的最大值
列表函数
length() 空格隔开
nth($list,$n) 列表中某个值(从1开始)
join($list1,$list2) 只能连接两个列表
append($list,$var) 将一个值添加到列表里
zip() 将多个列表值转换为多维列表
index() 某个值在列表中的index 从1开始 没找到返回false
三元函数
判断型函数
type-of($value) 返回值的类型
unit($number) 返回值的单位
unitless($number) 判断一个值是否含有单位 带单位返回false 不带单位返回true
comparable($number1 $number2) 判断两个值是否可以做加减和合并
三元运算函数
if($bollen,$trueValue,$falseValue)
颜色函数
RGB
HSL
Opacity
自定义函数 @function
8高级
条件
@if @else
循环
@for
@while
@each
0 条评论
下一页
