格式化风格
nested 缩进嵌套css （默认的）expanded 没有缩进。扩展的csscompact 简洁格式的csscompressed 压缩之后的css
变量
$blue: #fff;使用#{} 嵌套字符串$side:left;.test{ border-#{$side}-radius:5px}计算功能
使用 * / + - 进行计算
嵌套
立即学习“前端免费学习笔记（深入）”；
原来代理div h1{ color:red;}// scss 可以这样div{ h1{ color:red; }}在嵌套里面，可以使用&引用父元素，比如 a:hover的写法a{ &:hover{ color: red; }}继承
比如已经有了class1 了.class1{ }这边class2可以继承 class1的.class2{ @extend .class1;}mixin
对于mixin有点像 c语言里面的宏，可以重用的代码块使用@mixin指令，定义一个代码块@mixin left{ float:left; margin-left:10px}// 也可以指定参数和缺省值@mixin left($value:10px){ float:left; margin-left:$value;}颜色函数
sass 提供一些内置的颜色函数
插入文件
@import 方法
@if 条件判断
@else 命令
@if 1 + 1 == 2 { border: 1px solid; }循环语句 for / while 语句 each 语句
@for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; } } $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } 自定义函数
@funcion double($n){ @return $n * 2;}
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
699
收藏
