.scss写法及如何转化为.css  less，scss区别:
安装环节
1．安装rubyinstaller-2.⼀直next
2．安装完成后开始菜单中到ruby⾥的这哥，打开命令提⽰框
3．使⽤gem install sass安装sass， gem install compass安装compass（sass⼤哥插件，练熟sass后再研究）
编译环节
SASS⽂件就是普通的⽂本⽂件，⾥⾯可以直接使⽤CSS语法。⽂件后缀名是.scss，意思为Sassy CSS。
下⾯的命令，可以在屏幕上显⽰.scss⽂件转化的css代码。（假设⽂件名为test。）
sass test.scss
如果要将显⽰结果保存成⽂件，后⾯再跟⼀个.css⽂件名。
sass test.scss test.css
SASS提供四个编译风格的选项：
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
⽣产环境当中，⼀般使⽤最后⼀个选项。
sass --style compressed test.sass test.css
你也可以让SASS监听某个⽂件或⽬录，⼀旦源⽂件有变动，就⾃动⽣成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
$color_333:#333333;
$line_height24:24px;
.text{
line-height:$line_height24;
margin:$line_height24/2;
color:$color_333;
}
.bg{
background:$color_333;
}
/
*编译结果*/
@charset "GBK";
.text {
line-height: 24px;
margin: 12px;
color: #333333; }
.bg {
background: #333333; }
.container{
color:#ccc;
h1{ font-size:18px;}
ul{
position:relative;
margin-top:15px;
li{
background:#ddd;
}
}
}
/*编译结果*/
.container {
color: #ccc; }
.
container h1 {
font-size: 18px; }
.container ul {
position: relative;
margin-top: 15px; }
.container ul li {
background: #ddd; }
@mixin float{
.clear{
clear:both;
}
.
left{
clear:left;
}
.right{
clear:right;
}
}
div{
@include float
}
@mixin rounded-corners ($radius: 5px) {  border-radius: $radius;
-
webkit-border-radius: $radius;
-moz-border-radius: $radius;
}
#header {
@include rounded-corners;
}
#footer {
@include rounded-corners(11px);
}
/*编译结果*/
div .clear {
clear: both; }
div .left {
clear: left; }
div .right {
clear: right; }
#header{
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#footer{
border-radius:11px;
-webkit-border-radius:11px;
-moz-border-radius:11px;
}
/*继承*/
.relative{
display:block;
position:relative;
}
.title{
@extend .relative;
font-size:18px;
color:#fff;
}
/*编译结果*/
.relative, .title {
display: block;
position: relative; }
.title {
font-size: 18px;
color: #fff; }
/*混合运算*/
$selector_name:'clear';
@mixin clearfix{
#{$selector_name}{
color:red;
}
}
body{
@include clearfix;
}
/*编译结果*/
body clear {
color: red; }
/* 加减乘运算 */
$the-border:1px;
$base-color:#111;
$red:#842210;
#header{
color:$base-color*3;
border-left:$the-border;
border-right:$the-border*2;
}
#footer{
color:$base-color+#003300;
border-color:desaturate($red,10%);
}
/*编译结果*/
#header {
color: #333333;
border-left: 1px;
border-right: 2px; }
#footer {
color: #114411;
border-color: #7d2717; }
/
* 作⽤域 */
$color_11: #00c; /* 蓝⾊ */
#header_11 {
$color_11: #c00; /* red */
border: 1px solid $color_11; /* 红⾊边框 */ }
#footer_11 {
border: 1px solid $color_11; /* 蓝⾊边框 */
}
/*编译结果*/
/* 蓝⾊ */
#header_11 {
/
* red */
border: 1px solid #cc0000; /* 红⾊边框 */ }
#footer_11 {
border: 1px solid #cc0000; /* 蓝⾊边框 */ }
css文件怎么写
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue; }
}
/*编译后的结果*/
.border-1 {
border: 1px solid blue;
}
.border-2 {
border: 2px solid blue;
}
.border-3 {
border: 3px solid blue;
}
.border-4 {
border: 4px solid blue;
}
.border-5 {
border: 5px solid blue;
}
.border-6 {
border: 6px solid blue;
}
.border-7 {
border: 7px solid blue;
}
.border-8 {
border: 8px solid blue;
}
.
border-9 {
border: 9px solid blue;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。