可以做360度全景图的网站,长沙制作手机网站的公司,网站建设推广策划,网站301和302Sass(Syntactically Awesome Style Sheets) ,是一种 css 预处理器和一种语言, 它可以用来定义一套新的语法规则和函数#xff0c;以加强和提升 CSS. 它有很多很好的特性#xff0c;但是它有类似 Ruby 的语法#xff0c;没有花括号#xff0c;没有分号#xff0c;遵循严格的…Sass(Syntactically Awesome Style Sheets) ,是一种 css 预处理器和一种语言, 它可以用来定义一套新的语法规则和函数以加强和提升 CSS. 它有很多很好的特性但是它有类似 Ruby 的语法没有花括号没有分号遵循严格的缩进
它在书写规则变量命名方面和 CSS 代码有着很大的区别。于是后来官方在 2010 年推出了一个全新的语法叫做 SCSS, 意思是 Sassy CSS. 这个语法带来了对 CSS 友好的语法试图弥合 Sass 和 CSS 之间的差别.
嵌套
可以把子元素放入父元素里面
变量
在 CSS 文件中我们经常会用到颜色 color 可能好几个元素的 CSS 样式都会用到同样的一种颜色因为网站往往是一个统一的风格。 这样我们如果一旦要更改这个颜色我们就要更改整个 css 文件中的所有地方。而变量解决了这个问题我们可以把一个颜色值赋给一个变量所有用到这个颜色的地方都用这个变量替代。这样需要更改颜色时只需要修改这个变量的值就可以了. 当然CSS 中的宽度长度等也可以类似这样使用统一的变量来进行.
3. 局部
Sass 可以通过使用局部系统来把样式表分成多份文件根据不同的需求组织不同部分的样式表形成不同的 css 文件
比如把页眉样式写在页眉样式表中类似的有 页脚样式表导航样式表,按钮样式表....我们公司在开发多个项目时都采用了这种方法形成多个 scss 文件比如有
colours.scss, typography.scss, layout.scss, footer.scss, header.scss, navigation.scss, blocks.scss, forms.scss, slider.scss, buttons.scss, margins.scss,icons.scss, tables.scss..
import命令也可以用于在 html 文件中导入外部的 css 文件
import 规则一定要先于除了 charset 的其他任何 CSS 规则
使用import 命令进行媒体查询
媒体查询是 CSS3 中出现的新特征在 css 中使用 media 关键字来指定, 一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式范围的表达式组成比如宽度高度和颜色。 它允许内容的呈现针对一个特定范围的输出设备进行裁剪而不必改变内容本身.
混合宏
使用 Sass 的一个很大的特性是混合宏. 混合宏是很小的代码片段(类似局部), 使用mixin 标志来标识 你可以在文件中的任何部分使用include 标志来复用这个混合宏.
混合宏结合变量使用是个很普遍的例子, 最常见的例子就是创建圆角按钮. 创建一段实现圆角代码的混合宏用传入的变量来代替圆角值, 这样可以根据传入变量值不同实现不同的圆角按钮
公司项目中前端 css 文件我们都是写 SCSS 文件,然后通过import 导入到 style.scss 文件中最后通过 gulp 来生成 style.css 文件
