标签：基本 style hover sass color 整理 visited border 选择器
1、使用变量（使用$符号标识变量）比如$highlight-color
-
变量声明：可以在css规则块定义之外存在。当定义在css规则块内，则该变量只能在规则块内使用
-
变量引用：border: 1px solid $highlight-color;
-
变量命名：可以使用中划线和下划线，效果相同
-
通过 #{} 插值语句可以在选择器或属性名中使用变量
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
2、嵌套css规则
-
避免了重复输入父选择器，易于管理
-
：hover的伪类嵌套需要使用父选择器 &
-
在父选择器之前添加选择器body.ie & { color: green }
-
群组选择器.button, button
-
组合选择器：>、+（元素a后紧跟的b元素）和~（跟在a后的同层b元素）
dl > {
dt { color: #333 }
dd { color: #555 }
}
3、嵌套属性
-
规则：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中
-
border-styleborder-widthborder-color以及border-*等可以写成 border: { style,width,color }
-
缩写形式
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
4、导入sass样式文件
-
@import规则，它允许在一个css文件中导入其他css文件
-
静默注释，以//开头，不会出现在生成的css文件中
5、混合器
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
ul.plain {
color: #444;
@include no-bullets;
}
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(blue, red, green);
}
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
-
默认参数值（为了在@include混合器时不必传入所有的参数）
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
){
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
6、选择器继承
-
通过@extend语法，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
标签：基本,style,hover,sass,color,整理,visited,border,选择器
来源： https://www.cnblogs.com/liangtang/p/16139040.html
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
