sass环境配置与学习

sass环境配置(link)1.安装ruby http://rubyinstaller.org/downloads2.安装sassgem install sass*.修改gem的sourcegem s

sass环境配置(link)

1.安装ruby http://rubyinstaller.org/downloads

2.安装sass

gem install sass

*.修改gem的source

gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/gem sources -l

*.升级sass

gem update sass

*.查看sass版本

sass -v

*.sass命令行编译（link）

sass style.scss style.css

sass学习

// 引用@import "_reset";/* 这种注释会在css里显示  *///普通变量$baseBgColor: #cc3333;//默认变量$baseColor: #fff !default;$baseFontFamily: "Microsoft Yahei", "Hiragino Sans GB", sans-serif;$baseFontSize: 14px;// 运算$baseFontSize1: $baseFontSize + 2px;$baseLineHeight: 1.5;//一维数组list$px1: 6px 10px;//二维数组list$color1: (	(red, blue), 	(blue, red));//map$heading: (	h1: 2em,	h2: 1.5em,	h3: 1.2em);p {	    background: $baseBgColor;    color: $baseColor;    font-size: $baseFontSize;}.t1 {	font: #{$baseFontSize}/#{$baseLineHeight} #{$baseFontFamily};	padding: $px1;	margin: nth($px1, 1) nth($px1, 2);	//属性嵌套(Nesting)	border: {    	style: solid;    	left: {      		width: 2px;      		color: $baseBgColor;    	}  	}  	//选择器嵌套(Nesting)	& > a {				color: nth(nth($color1, 2), 2);		&:hover{					color: red;		}	}	//@at-root跳出所有上级选择器	@at-root {		span {			color: $baseBgColor;			font-weight: bold;		}	}}//混合(mixin)@mixin styl_1($opacity: 50, $fontSize: 16px, $color: red) {	opacity: $opacity / 100;  	filter: alpha(opacity=$opacity);  	font-size: $fontSize;  	color: $color;  	}@mixin styl_2($fontSize: 16px, $shadow...) {	  	font-size: $fontSize;  	  	-webkit-box-shadow:$shadow;  	box-shadow:$shadow;}.t1 > .s1 {	@include styl_1(80, $color:blue);	@include styl_2(18px, 0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));}//继承%add1 {	p {		font-size: 20px;	}}.t2 {	@extend .t1;	p {		color: #000;		font-weight: bold;	}	@extend %add1;}//函数@function pxToRem($px) {	@return $px / 12px * 1rem;}.t2 {	font-size: pxToRem(16px);	p {		color: lighten(#000,40%);			// 减淡		background: darken(#cc3333, 20%);	// 加深		}}//@if判断$theme: green;.t2 > p {	@if $theme == blue {		color: blue;	} @else if $theme == red {		color: red;	} @else {		color: $theme;	}}//三目判断.t2 > p {	background: if(false, red, blue);}//for循环@for $i from 1 through length($px1) {	.item1-#{$i} { 		font-size: nth($px1, $i);	}}//多个字段map数据循环@each $index, $val in $heading {	#{$index} {		font-size: $val;	}}//多个字段list数据循环@each $a, $b in $color1 {	.item2-#{$a} {		color: $b;	}}