
自动化
cfcp
不积跬步无以至千里
展开
-
快速学sass(四)---变量
变量sass的变量我们都知道如何定义了吧,使用$+变量名:变量值 普通变量 定义之后可以在全局范围内使用。$fontSize: 16px;body{ font-size:$fontSize;}编译后的css代码:body{ font-size:16px;}默认变量 sass 的默认变量仅需要在值后面加上 !default 。$baseLineHeight:2em !def转载 2017-03-13 21:31:25 · 409 阅读 · 0 评论 -
快速学sass(五)--嵌套
选择器嵌套Sass 中还提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深,这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法,Sass 的嵌套分为三种: 选择器嵌套 属性嵌套 伪类嵌套假设我们有一段这样的转载 2017-03-13 21:39:18 · 347 阅读 · 0 评论 -
快速学sass(六)--混合宏
声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的。但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义。在这一节中,主要向大家介绍 Sass 的混合宏。1、声明混合宏不带参数混合宏:在 Sass 中,使用“@mixin”来声明一个混合宏。如:@mi转载 2017-03-13 22:36:56 · 307 阅读 · 0 评论 -
快速学sass(二)--编译
sass如何编译?1.命令行编译单文件转换命令sass style.scss style.css 在实际编译过程中,你会发现上面的命令,只能一次性编译。每次个性保存“.scss”文件之后,都得重新执行一次这样的命令。如此操作太麻烦,其实还有一种方法,就是在编译Sass 时,开启“watch”功能,这样只要你的代码进行任保修改,都能自动监测到代码的变化,并且给你直接编译出来:sass --wat原创 2017-03-13 20:52:00 · 277 阅读 · 0 评论 -
快速学sass(三)--输出方式
众所周知,每个人编写的 CSS 样式风格都不一样,有的喜欢将所有样式代码都写在同一行,而有的喜欢将样式分行书写。在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格: 1、嵌套输出方式 nested 在编译的时候带上参数“ –style nested”:sass --watch test.scss:test.css --style nested编译前和编译后的原创 2017-03-13 21:09:13 · 774 阅读 · 0 评论