先放一张logo镇楼,emmm...
CSS预处理技术,及种类介绍
- 什么是css预处理技术
- CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。
- 通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如变量$main-color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
- css预处理技术的种类
- Sass(SCSS)
- LESS
- Stylus
- Turbine
- Swithch CSS
- CSS Cacheer
- DT CSS
如此之多的 CSS 预处理器,那么“我应该选择哪种 CSS 预处理器?”也相应成了最近网上的一大热门话题,各大技术论坛也是争论不休,如掘金(哈哈,偷偷舔一波)
到目前为止,在众多优秀的 CSS 预处理器语言中就属 Sass
、LESS
和 Stylus
最优秀,讨论的也多,今天小编将介绍 CSS 预处理器中的 Sass。相信各位攻城狮会稀饭的
废话不说,直接上代码
变量相关
局部变量的含义类似于javascript中的局部变量(啥是局部变量,额.....)
嵌套相关
使用&可以增加选择器权重
属性嵌套是把属性拆分成对象。对象内成key,value
占位符 placeholder
使用%声明占位符,@extend 来应用占位符
占位符的功能非常强大,如果只声明了占位符,没有引用,编辑完成时,则不会生成代码
拓展与继承
说完占位符之后,赶紧拿小本本把拓展与继承也记下来
可以看出占位符和继承中都运用了@extend
区别是占位符不会生成有效代码,而继承一个父类时,父类是有效的代码
混入指令 mixin
混入指令有很多叫法,如混合指令,宏指令。小编就按照Vue的叫法,叫它混入了
混入指令可以设置参数来灵活的运用
如果你有时候不想传参数,那就在声明时设置个默认参数
SassScript语法
流程指令 @if
控制指令是一种高级功能,日常编写过程中并不常用到,主要与混合指令 (mixin) 配合使用
循环指令 @for
循环指令 @while
循环指令 @each
函数的使用
字符串函数
数字函数
列表函数
颜色函数
sass中的@规则
@import
- Sass 扩展了 CSS 的 @import 规则,让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
- @import 根据文件名引入。 默认情况下,它会寻找 Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import规则
- 文件的扩展名是 .css。
- 文件名以 http:// 开头。
- 文件名是 url()。
- @import 包含了任何媒体查询(media queries)。
- 如果上述情况都没有出现,并且扩展名是 .scss 或 .sass, 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名, Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。
@media
Sass 中的 @media 指令和 CSS 的使用规则一样的简单,但它有另外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样,如果在样式中使用 @media 指令,它将冒泡到外面
@at-root
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。
@debug
@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug
@warn
@warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass。
@error
@error 和 @warn、@debug 功能是如出一辙。
结束语
在日常项目中,部分语法用的较少,慢慢的被忽略。今天总结的这篇文章希望能帮助到大家,如果觉得有用,就给小编加个鸡腿吧(点个赞,么么么)