掌握sass这些技能,帮助提升开发效率

掌握sass这些技能,帮助提升开发效率

先放一张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 预处理器语言中就属 SassLESSStylus 最优秀,讨论的也多,今天小编将介绍 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 功能是如出一辙。

结束语

在日常项目中,部分语法用的较少,慢慢的被忽略。今天总结的这篇文章希望能帮助到大家,如果觉得有用,就给小编加个鸡腿吧(点个赞,么么么)

分类:
前端
标签: