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.变量
css代码
scss代码
在代码块中&符号就是指代了当前的父选择器
并且不会再被父选择器包裹
父选择器标识符 &
代码
群组选择器（也支持）
支持 + > ~等选择器
属性的嵌套(适用于margin-left padding-left 等)
2-1嵌套规则
2.嵌套
一般把只用引入的sass文件 称为局部文件 文件名可以使用下划线开头 而import的时候可以忽略下划线
原生的css import (会多一个http请求 只有import进来了才会执行css) 所以不要引入css文件
@import
同一个变量被赋值 最后只会用最后的那个值
如果后面的单个变量使用了!defalut 则不会覆盖前面的值
!default降低优先级
嵌套导入（在局部css代码块里导入）
3.导入
4.注释
变量只是复用变量值 而当我们需要复用大段css代码时候就需要使用混合器
不要滥用混合器 当感觉可以给这个混合器合适命名的一般就是比较合理的混合器
何时使用混合器
定义 @mixin
引用 @include
使用
定义mixin
遵守传参顺序
自定义传参顺序
默认值
混合器传参
5.混合器
@extend
也可以继承复杂的选择器
不支持 > + ~ 下级选择器 （不支持有空格好像）
一
二
比较几种写法
局限性
有%号的继承(相当于替换 将%替换为继承它的css) 不会被编译css
选择器继承 @extend 选择器
作用域问题 当使用@medita 等选择器的时候 只能继承一起被@meidia包裹的选择器
6.继承
unquote() 删除字符串中的引号
quote() 给字符串添加引号
字符串函数
percentage() 将一个不带单位的数转换成百分比值
round() 四舍五入
ceil() 天花板
floor()
abs() 绝对值
min(...numbers) 几个数中的最小值
max(...numbers) 几个数中的最大值
数字函数
length() 空格隔开
zip() 将多个列表值转换为多维列表
index() 某个值在列表中的index 从1开始 没找到返回false
列表函数
type-of($value) 返回值的类型
unit($number) 返回值的单位
unitless($number) 判断一个值是否含有单位 带单位返回false 不带单位返回true
comparable($number1 $number2) 判断两个值是否可以做加减和合并
判断型函数
三元运算函数
三元函数
RGB
HSL
Opacity
颜色函数
内置函数
自定义函数 @function
7.函数
@if @else
条件
@for
@while
@each
循环
8高级
sass
0 条评论
回复 删除
下一页
