css:scss基本使用
SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件
目录
一、变量
二、嵌套
三、引入
四、混合
五、继承
六、if / else / each /for
七、插值、注释
一、变量
1、变量以 $
开头,用来存储一些在css中需要复用的参数;
2、变量存在作用域,内部声明的变量无法在外面使用,外部如需引用内部的变量,可在变量值的后面添加!global
声明;
3、变量名中,中划线等同下划线,值会被第二次定义的变量覆盖。
scss代码
$color = #333;
$bac_color = #222;
$bac-color = #111;
.main{
color : $color;
background: $bac_color;/*$bac_color被$bac-color覆盖*/
}
编译后:
.main{
color : #333;
background: #111;
}
二、嵌套
nav ul{list-style: none;}
nav li{display: inline-block;}
这是一个网站导航例子,使用scss编写可以提取出相同父元素nav
,把ul
和li
都嵌在nav
选择器中使用,改成scss代码如下:
nav {
ul {list-style: none;}
li { display: inline-block; }
}
三、引入
1、scss通过 @import
可以把多个文件结合到一起;
2、以 _
开头命名的文件不会直接生成为CSS文件,只在使用@import
指令的位置被导入;
3、可全局引入或局部引入;
4、scss中引入片段时,可以缺省文件扩展名;
4、css原生的@import
会通过额外的HTTP请求获取引入的样式片段,而scss的@impor
t则会直接将这些引入的片段合并至当前CSS文件,并且不会产生新的HTTP请求。
/*_one.scss*/
nav {
ul {list-style: none;}
li { display: inline-block; }
}
/*two.scss*/
@import '_one' /*全局导入,缺省后缀*/
.main{
@import '_one'/*局部导入*/
color : #333;
background: #111;
}
四、混合
1、通过 @mixin
定义一个类或方法,在其它位置通过 @include
引用这个类或方法
2、@mixin
如果没有调用,不会被渲染
3、多个参数时,传参指定参数的名字,可以不用考虑传入的顺序
@mixin border-radius($radius:5px) { /*设置默认值为5px*/
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
.box {
@include border-radius(); /*未传参数,默认值为5px*/
}
.box1 {
@include border-radius(10px); /*传入参数,值为10px*/
}
编译后:
.box {
border-radius: 5px;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.box1 {
border-radius: 10px;
-ms-border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
}
五、继承
1、使用%
定义一个被继承的样式,它本身不起作用,只用于被其他人继承
2、样式如果没有被继承,不会输出到最终生成的CSS文件
3、注意,不能继承 @extend .box .main
这种连续组合的类,应该写为 @extend .box, .main
%err-color {
color:red;
}
.errBox{
@extend %err-color;
padding: 10px;
}
.errBox2{
@extend %err-color;
padding: 5px;
}
编译后:
.errBox, .errBox2{
color:red;
}
.errBox{
padding: 10px;
}
.errBox2{
padding: 5px;
}
六、if / else / each / for
1、@if
和 @else
@if 条件为真 {
//code
} @else {
//code
}
2、 @each
遍历变量所存在的所有数据。
@each $color in red, green, yellow, blue {
.p_#{$color} { /*插值,第七点会讲到*/
background-color: #{$color};
}
}
编译后:
.p_red { background-color: red; }
.p_green { background-color: green; }
.p_yellow { background-color: yellow; }
.p_blue { background-color: blue; }
3、@for
循环
(1) 关键字 through 表示包括终点值这个数,
(2) 关键字 to 不包括终点值这个数。
@for $i from 1 through 3 { /*through 包括3这个终点值*/
.item-#{$i} {
width: 2px * $i;
}
}
编译后:
.item-1 {
width: 2px;
}
.item-2 {
width: 4xp;
}
.item-3 {
width: 6px;
}
七、其他
1、插值
一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性名称或在某些特殊情况下则必须要以 #{$XXX}
形式使用。
如下,变量作为属性名的情况使用插值的形式使用
@each $color in red, green, yellow, blue {
.p_#{$color} { /*插值,第七点会讲到*/
background-color: #{$color};
}
}
2、注释
(1) 使用//
注释的内容编译后不存在
(2) 使用/* */
注释的内容编译后会存在css文件中
本文地址:https://blog.csdn.net/weixin_41981909/article/details/107354937
上一篇: postman cookies登陆设置
下一篇: python socket实现聊天室
推荐阅读
-
juery 和ajaxPro结合使用的问题,如内容_html/css_WEB-ITnose
-
jQuery Validate 插件 验证基本使用方法及注意事项详解(代码实例)
-
在weex中愉快的使用scss的方法步骤
-
使用 CSS & jQuery 制作一款漂亮的多彩时钟_html/css_WEB-ITnose
-
div + css 基本框架_html/css_WEB-ITnose
-
详解CSS3中常用的样式【基本文本和字体样式】
-
CSS使用BEM命名规范实践
-
JQueryEasyUI datagrid框架的基本使用_jquery
-
如何使用CSS3画出一个叮当猫_html/css_WEB-ITnose
-
现在就能投入使用的12个高端大气上档次的CSS3特性_html/css_WEB-ITnose