sass基础常用指南
2018-06-24 02:02:15来源:未知 阅读 ()
一、变量
$global-color:red; .nav{ background:$global-color; }
二、sass命名时横杠和下划线不区分
$global-color:yellow; .nav{ background-color:$global_color } .footer{ background-color:$global-color }
三、变量中可以套用变量
$global-color:red; $global-border:1px solid $global-color; .nav{ backhround:$global-color; border:$global-border; }
四、嵌套规则
#head{ .nav{ background:red; .logo{ float:left; } } p{ color:red } }
五·、伪类和直接调用父级符号&
#head{ a{ color:biue; &:hover{ color:red } } }
六、sass的导入
@import "header"; .main{ color:red; } @import "fotter";
七、嵌套导入
@import "header"; .main{ color:red; @import "main"; } @import "fotter";
八、关于注释
以下注释会被编译 /* *时间:2017-11-18 *auther:liumingwang * */ 以下注释不会被编译 //color 静默注释
九、默认变量
@import "header"; $color:red!default; //这里是默认变量,“header”里面有个这个变量就用header里面的,header里面没有,就用此页面的默认变量 .head{ color:$color; }
十、混合器的使用mixin
@mixin border-radius{
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
}
.header{
&-nav{
@include border-radius;
}
}
十一、混合器mixin传参数
@mixin links-color($nomal,$hover,$visited,$active){
color:$nomal;
&:hover{
color:$hover;
}
&:visited{
color:$visited
}
&:active{
color:$active
}
}
.header{
@include links-color(red,blue,green,yellow)
}
十二:继承
.center{ margin:0 auto; } .main{ @extend .center }
十三:占位符
%center{
margin: 0 auto;
}
.main{
@extend %center;
}
注意:占位符和继承的区别:以上占位符的%center不会被编译,只有.main中会编译,然后继承的.center和.main都会被编译
十四、注意事项
1、所有引用或者用到sass语句的最后都要加上封号(“;”)否则会报错
2、sass文件头加上下划线就不会被编译(可以用一个主文件来引用这些下划线的sass,然后最后编译主文件)
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
- HTML基础01 2020-06-07
- [03]HTML基础之行内标签 2020-06-01
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash