继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

sass 语法总结和注意点

shuangsnow
关注TA
已关注
手记 5
粉丝 10
获赞 217

图片描述

一.sass 在线编译工具 http://sassmeister.com/
本地编译工具:Koala以及如何调试参考: http://www.w3cplus.com/sassguide/
二.sass 基本语法
以下在sass 3.2.0版本中都是适用额
1. 变量的声明: 直接声明变量,默认变量,特殊用途变量
(1)一般我们定义的变量($定义)都为【属性值】,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。
(2)sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;

(3)sass 解密之变量,重点阅读: 变量默认值!default

scss 的import 功能解决了scss的组件化功能问题. 在scss 文件打包中经常用到的原理.

(4)多值变量
多值变量分为list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。
2.sass的嵌套
包括两种:一种是选择器的嵌套;另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承,从而增强了sass文件的结构性和可读性。
在选择器嵌套中,可以使用&表示父元素选择器
属性嵌套不作为开始学习的重点
3.混合mixin
sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include来调用。 类似于函数
(1) 无参数mixin 无参数声明时没有括号
(2) 有参数mixin
(3) 多个参数mixin
(4)多组值参数mixin
4.@content
@content在sass3.2.0中引入,可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式,接受的样式从@content开始。
5.占位选择器%
从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend去继承相应的样式,都会解析出来所有的样式。占位选择器以%标识定义,通过@extend调用。
6.@function 函数
参考文档:http://www.w3cplus.com/preprocessor/custom-sass-functions.html
区别注意:Sass代码的mixins输出行将直接编译为CSS样式,而函数则返回一个可以作为CSS属性或可传递给另一个function或mixin的值。
参考文档:sass揭秘之@mixin,%,@function
8. @if判断
@if可一个条件单独使用,也可以和@else结合多条件使用
9.三目判断
10.for循环
11. each 循环

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP