$ 300px !default;
$: 变量声明符号;
变量名称;
300px: 赋予变量的值;
!default 代表默认样式
!default:
$primary-size : 26px;
$primary-size : 45px;
$primary-size : 12px !default;
以上css样式代表 12px为默认的样式 上面可以从写默认样式的值 (即被覆盖) 上面两个样式 一次由上到下被覆盖 跟css的样式规则相同
$color: #000; header{ $color: red; h1{ color: $color; //red; } } footer{ color: $color; //#000; }
css定义可以分为 全局变量和局部变量 定义的规则: 是否在选择器 函数 混合宏...的外面定义
scss嵌套分为三种
选择器嵌套
属性嵌套
伪类嵌套
//选择器嵌套
<nav> <span>haha</span> </nav> nav{ span{ color:$color; } }
// 属性嵌套 <div class="box"><div> .box{ .border{ top:1px solid #ccc; bottom: 1px solid #000; } }
border-top
magin-top
font-size
//伪类嵌套 .clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } }