sass安装 使用
因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。先导官网下载个ruby
在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境

然后直接在命令行中输入
gem install sass
按回车键确认,等待一段时间就会提示你sass安装成功。最近因为墙的比较厉害,如果你没有安装成功,那么请参考下面的淘宝的RubyGems镜像安装sass,如果成功则忽略。
如果要安装beta版本的,可以在命令行中输入
gem install sass --pre
你还可以从sass的Git repository来安装,git的命令行为
git clone git://github.com/nex3/sass.git
cd sass
rake install
升级sass版本的命令行为
gem update sass
查看sass版本的命令行为
sass -v
你也可以运行帮助命令行来查看你需要的命令
sass -h
gem sources
命令来配置源,先移除默认的https://rubygems.org
源,然后添加淘宝的源https://ruby.taobao.org/
,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输入sass安装命令gem install sass
了,关于常用gem source命令可参看:常用的gem source
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass
gem sources --remove https://rubygems.org/
gem sources -a http://gems.ruby-china.org/
gem sources -l
sass test.scss
sass --watch test.scss:test.css
sass --watch sassFileDirectory:cssFileDirectory
$blue:#1875e7;
div{color:$blue;}
$left:left;
.rounded {border-#{$left}-radius:5px;}
!default
即可。 sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可nth($var,$index)
取值$px: 5px 6px 8px 10px;//一维数组
$pxT: 10px 20px , 30px 40px;//二维数组
$trpx:(1px solid #eee ) (16px solid #aaa);//二维数组 .class8 {
font-size: nth($px,3);
}
.class9 {
border: nth($trpx,1);
}
.class10 {
margin: nth($pxT,2);
}
$map: (key1: value1, key2: value2, key3: value3);
。可通过map-get($map,$key)
取值。$headings:(h1:2em,h2:1.5em,h3:1em);
.class11 {
font-size: map-get($headings,h2);
} @each $heade , $size in $headings {
#{$heade} {
font-size: $size;
}
}
$var:10;
body{margin:(14px/2);top:50px+100px;right:$var*10%;}
div{
color:$blue;
h1 {
color:red;
}
}
p {
border:{
color:red;
}
}
}
a {
&:hover {color:red;}
}
#content aside { color: red;body.ie & { color: green }}
.container { h1, h2, h3 {margin-bottom: .8em} }
nav, aside { a {color: blue} }
require 'sass/supports'
这一行,在下面一行添加Encoding.default_external = Encoding.find('utf-8')
标准的CSS注释 /* comment */ ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
/*!
重要注释!
*/
.class1 {
border: 1px solid #ddd;
}
.calss2 {
@extend .class1;
font-size: 20px;
}

@mixin left {
float: left;
margin-left: 10px;
}
.class3 {
@include left;
}
@mixin right($value:10px) {
float: right;
margin-right: $value;
}
.class5 {
@include right()
}
.class4 {
@include right(40px)
}
@mixin rounded ($vert,$horz,$radius:10px) {
border-#{$vert}-#{$horz}-radius:$radius;
-moz-border-#{$vert}-#{$horz}-radius:$radius;
-webkit-border-#{$vert}-#{$horz}-radius:$radius;
}
.nav {
@include rounded(top,left)
}
.footer {
@include rounded(top,left,5px)
}
多组值参数mixin
$variables...
。@mixin box-shadow ($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow: $shadow;
}
@mixin max-screen ($res) {
@media only screen and (max-width: $res) {
@content;
}
}
@include max-screen(480px) {
body {color:red;}
}
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
.class6 {
@if 1+1 == 2 {color:red}
@if 5 < 3 {color:blue}@else {
background-color: #FFF
}
}
@for $var from <start> through <end>
和@for $var from <start> to <end>
。$i表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid red;
}
}
$i:6;
@while $i > 0 {
.item-#{$i} {width:20px;}
$i:$i - 2;
}
@each $member in a,b,c,d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
@function double($n) {
@return $n * 2;
}
.class7 {
width: double(5px);
}
//单个选择器跳出
.parent {
color:red;
@at-root .child {
width: 100px;
}
}
//多个选择器跳出
.parent2 {
color:blue;
@at-root {
.child1 {width: 100px;}
.child2 {width: 200px;}
}
}
@at-root
只会跳出选择器嵌套,而不能跳出@media
或@support
,如果要跳出这两种,则需使用@at-root (without: media)
,@at-root (without: support)
//跳出父级元素嵌套
@media print {
.parent2 {
color: red;
@at-root .child3 {
color: blue;
}
}
} //跳出media嵌套 父级有效
@media print4 {
.parent4 {
color: red;
@at-root (without: media) {
.child4 {
width: 200px;
}
}
}
} //跳出media和父级
@media print5 {
.parent5 {
color:red;
@at-root (without:all) {
.child5{height: 200px;}
}
}
}
.child6 {
@at-root .parent6 & {
height: 300px;
}
}
%
%
。这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend
去继承相应的样式,都会解析出来所有的样式。占位选择器以%
标识定义,通过@extend
调用。%ir {
color:transparent;
text-shadow:none;
background-color: transparent;
border:0;
}
%clearfix {
@if $ie7 {
*zoom :1;
}
&:before,
&:after {
content: "";
display: table;
font: 0/0; }
&:after {
clear: both;
}
}
#header {
width: 2100px;
@extend %ir;
}
.ir {
@extend %ir;
}
sass安装 使用的更多相关文章
- sass 安装、配置,css规则
http://blog.csdn.net/oyuemijindu/article/details/51036096 --sass 安装 一安装 1.ruby下载,可以到官网下载 ,注意如果是系统如果 ...
- Sass安装(windows版)
Sass安装(windows版) 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/download ...
- win下sass安装失败的一种可能
首先声明,本篇转自CSDN的LZGS_4. 今天我也遇到这个问题,就把文章擅自转载了,方便自己也方便更多的人吧. 因为sass和compass依赖于ruby环境,所以装之前先确认装了ruby.可到官网 ...
- windows下sass安装 以及一些要注意的问题
都说sass 环境难配其时也没那么难 按照以下步骤一下一下来还是挺快的 如果你是喜欢less 那就当我没说 233333 1.sass 是基于ruby这门语言的需要使用 rubygem这个包管理器安装 ...
- SASS安装的那些事
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- sass安装及使用
在Mac系统下,Ruby一般已内置在其中,如果您不能确认是否已安装,或者说你不知道你的Ruby使用的版本,你可以打开你的命令工具: $ ruby -v 安装sass 在大多数情况和大部分人群中,还是喜 ...
- lnmp git ruby sass 安装
1 cd .. 2 ls 3 cd mzx/ 4 ls 5 cd 桌面 6 cd lnmp1.4-full/ //到lnmp 的官网上下载后,根据官网的提示来安装lump 7 ls 8 install ...
- sass学习之一:sass安装compass部署
主要参考 http://www.jianshu.com/p/5bfc9411f58f -------------------------------------------- sass基于ruby 需 ...
- sass安装方法,绝对好用的方式
系统重做了,很多东西都重装,sass也一样,结果在安装的过程中遇到了问题,这里记录下,也给同样遇到问题的朋友们一个思路.本方法是参照http://www.w3cplus.com/sassguide/i ...
随机推荐
- 在用busybox制作系统过程中遇到的问题
遇到的问题: 1.开机报错: 在做完整个系统之后重启出现了这个报错 VFS: Cannot open root device "sda2" or unknown-block(0,0 ...
- Unity-Animator深入系列---API详解
回到 Animator深入系列总目录 测试Unity版本为5.2.1 人形动画的接口都有标注 本列表不包含所有标注为过时的方法 1.Vector3 angularVelocity { get; } [ ...
- Android之alertDialog、ProgressDialog
一.alertDialog 置顶于所有控件之上的,可以屏蔽其他控件的交互能力.通过AlertDialog.Builder创建一个AlertDialog,并通过setTittle(),setMesseg ...
- JQuery设置和去除disabled属性
//两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("dis ...
- Django1.9开发博客(9)- 用户认证
你应该注意到了一点,当你去新建.修改和删除文章的时候并不需要登录,这样的话任何浏览网站的用户都能随时修改和删除我的文章.这个可不是我想要的! 编辑和删除的认证 我们需要保护post_new, post ...
- Python 去剑式
Python 去剑式 种种变化,用以体演总诀.共有三百六十种变化. 用以破解普天下各门各派的剑法.「破剑式」虽只一式,但其中于天下各门各派剑法要义兼收并蓄:虽说「无招」却是以普天下剑法之招数为根基,因 ...
- Yii 添加Input时间插件
1.首先引入时间组件的JS文件,组件可以在网上下载到没有的可以到网上去下载 <script language="javascript" type="text/jav ...
- 51nod 1158 全是1的最大子矩阵
题目链接:51nod 1158 全是1的最大子矩阵 题目分类是单调栈,我这里直接用与解最大子矩阵类似的办法水过了... #include<cstdio> #include<cstri ...
- HTML 水平线<hr/>标签
定义和用法: <hr/>标签在HTML页面中创建一条水平线. 水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分. HTML 与 XHTML 之间的差异 在 HT ...
- ios基础篇(十二)——UINavgationController的使用(三)ToolBar
UIToolBar存在于UINavigationController导航栏控制器中,而且默认被隐藏:设置UINavigationController的toolbarHidden属性可显示UIToolB ...