文章目录
CSS :
sass
sass是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。
scss 与sass
CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化
SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。
scss 与sass的使用
- 变量
变量用来存储需要在CSS中复用的信息，例如颜色和字体。SASS通过$符号去声明一个变量。
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } 2.嵌套
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } }
- 引入
SASS能够将代码分割为多个片段，并以underscore风格的下划线作为其命名前缀（_partial.scss），SASS会通过这些下划线来辨别哪些文件是SASS片段，并且不让片段内容直接生成为CSS文件，从而只是在使用@import指令的位置被导入。
margin: 0;
font: 100% Helvetica, sans-serif;
- 混合
@mixin border-radius($radius) {
border-radius: $radius; -ms-border-radius: $radius; -moz-border-radius: $radius; border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; }
注意: @mixin要在@include调用前声明 如果@mixin声明包含参数,则@include调用也必须传参,否则会报错 除非,以” 参数:默认值 “的方式声明参数,在不传参的情况下使用默认值
- 继承
继承是SASS中非常重要的一个特性，可以通过@extend指令在选择器之间复用CSS属性，并且不会产生冗余的代码，下面例子将会通过SASS提供的继承机制建立一系列样式：
display: flex;
.container { width: 100%; }
article[role=“main”] {
float: left;
aside[role=“complementary”] {
float: right;
/===== SCSS =====/
a
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
/===== CSS =====/
a
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; } body.firefox a {
font-weight: normal; } “&”必须出现在复合选择器开头的位置，后面再连接自定义的后缀，例如：
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/210980.html原文链接：https://javaforall.net
