文章详情 - 首页

# 1) scss介绍 
**什么是scss?** Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能. 
**优点:** SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写趋于模块化.视觉更美观,嵌套便于管理 
 
 
# 2) scss语法 
## 1.变量 
 // css 
 .name{ 
 color: red; 
 font-size: 16px; 
 } 
 // scss 
 $fontSize: 16px; 
 $color: red; 
 .name{ 
 color: $color; 
 font-size: $fontSize; 
 } 
## 2.嵌套 
 // css 
 .name{ 
 color: red; 
 } 
 .name .age{ 
 font-size: 16px; 
 } 
 // scss 
 $fontSize: 16px; 
 $color: red; 
 .name{ 
 color: $color; 
 .age{ 
 font-size: $fontSize; 
 } 
 } 
## 3.引入 
 // css 
 // a.css 
 body{ 
 background: red; 
 } 
 // b.css 
 @import './a.css' 
 div{ 
 background: blue; 
 } 
 // 编译后: 
 //b.css 
 body{ 
 background: red; 
 } 
 div{ 
 background: blue; 
 } 
 
------------ 
 
 // scss 
 // a.scss 
 body{ 
 background: red; 
 } 
 // b.scss 
 @import './a.scss' 
 div{ 
 background: blue; 
 } 
 // 编译后: 
 //b.scss 
 body{ 
 background: red; 
 } 
 div{ 
 background: blue; 
 } 
 
## 4.混合mixin与% 
 // 响应式media @mixin定义 
 @mixin max-screen($px){ 
 @media screen and (max-screen: $px){ 
 $content; 
 } 
 } 
 
 // 调用定义好的media 
 @include max-screen(1200px){ 
 .box{ 
 width: 1000px; 
 }; 
 } 
 
 // 编译后 
 @media screen and (max-screen: 1200px){ 
 box{ 
 width: 1000px; 
 }; 
 } 
 
 
------------ 
 %ellipsis{ 
 overflow: hidden; 
 white-space: nowrap; 
 text-overflow: ellipsis; 
 } 
 
 .demo1{ 
 @extend %ellipsis 
 } 
 .demo2{ 
 @extend %ellipsis 
 } 
 
 // 编译后: 
 .demo1,.demo2{ 
 overflow: hidden; 
 white-space: nowrap; 
 text-overflow: ellipsis; 
 } 
 
## 5.继承 
## 6.运算 
 p { 
 font: 10px/8px; 
 $width: 1000px; 
 width: $width/2; 
 height: (500px/2); 
 margin-left: 5px + 8px/2px; 
 } 
 // 编译后: 
 p { 
 font: 10px/8px; 
 width: 500px; 
 height: 250px; 
 margin-left: 9px; } 
## 7.新特性&--父级选择器 
 // 结构 
 <div></div> 
 
 // css 
 div{ 
 color: red; 
 } 
 div:hover p{ 
 color: blue; 
 } 
 // scss 
 div{ 
 color: red; 
 &:hover{ 
 p{ 
 color: blue; 
 } 
 } 
 } 
## 8.静默注释 
 p{ 
 color: red; // 该注释不会展示在编译后的文件中 
 font-size: 16px;/*该注释会展示在编译后的文件中*/ 
 } 
## 9.条件 
 @if 
 p { 
 @if 1 + 1 == 2 { border: 1px solid; } 
 @if 5 < 3 { border: 2px dotted; } 
 @if null { border: 3px double; } 
 } 
 
 
------------ 
 
 @for 
 @for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值 
 
 @for $i from 1 through 3 { 
 .item-#{$i} { width: 2em * $i; } 
 } 
 
 
------------ 
 
 @each 
 @each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表 
 
 @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) { 
 #{$header} { 
 font-size: $size; 
 } 
 } 
 
 // 编译后 
 h1 { 
 font-size: 2em; } 
 h2 { 
 font-size: 1.5em; } 
 h3 { 
 font-size: 1.2em; } 
# )设计思想 
 
 
 base.scss 
 varables.scss, 
 mixin.scss, 
 media.scss, 
 grid.scss, 
 icon.scss, 
 btn.scss, 
 msg.scss, 
 table.scss, 
 form.scss, 
 header.scss, 
 footer.scss, 
 layout.scss, 
 pro.scss 
 
 layout.scss 
 font.scss, 
 color.scss, 
 transform.scss, 
 animations.scss

标签 css