最近更新
阅读排行
关注本站
浅析sass（二）变量
阅读：3633 次 编辑日期：2015-08-23
目录：
概述：
在我接手新公司工作之后，发现都是坑，代码不规范，css有的直接写文件里，有的写css文件，有的用sass，用的sass之后的文件后台同事也不会改还得我来，建议大家写代码的时候要用一个统一的规范，没有规矩不成方圆。
今天我们继续sass，之前讲了一些很入门的东西，今天我们来初步步讲一下sass中的变量。
基本变量：
sass的变量以$开头，变量值和变量名之间就需要使用冒号(:)分隔开
$fontSize: 12px;
body{
font-size:$fontSize;
}
//css style
//-------------------------------
body{
font-size:12px;
}
特殊变量：
但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用，例如border-top中的top等。
//sass style
//-------------------------------
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
//应用于class和属性
.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
font:#{$baseFontSize}/#{$baseLineHeight};
}
//css style
//-------------------------------
.border-top{
border-top:1px solid #ccc;
}
body {
font: 12px/1.5;
}
