Sass入门

来源:互联网 时间:1970-01-01


0 前面工作 本文主要使用bootstrap3的sass,下载链接 http://v3.bootcss.com/getting-started/ 安装Ruby,sass基于Ruby开发的

gem install sass 安装sass

3.1 安装失败,显示

ERROR: Could not find a valid gem 'sass' (>= 0), here is why: Unable to download data from http://ruby.taobao.org/ - bad response Not Found 404 (http://ruby.taobao.org/latest_specs.4.8.gz)

可能由于我之前安装octopress的时候换了Ruby使用淘宝镜像,现在淘宝镜像可能没有sass的了.

网上查了下解决方案,大多数还是说去淘宝的rubygems.org

参考 https://github.com/nimojs/blog/issues/14

//执行这句后的提示我是害怕的,什么鬼...和教程显示得不一样啊,但是勇敢的我还是去访问了下https://rubygems.org/,发现有这个网址的啊...于是尝试下去 K:bootstrap-sass-3.3.5 maizhikun$ gem sources --remove https://rubygems.org/ source https://rubygems.org/ not present in cache //和教程一致了... K:bootstrap-sass-3.3.5 maizhikun$ gem sources -a https://ruby.taobao.org/ https://ruby.taobao.org/ added to sources //执行到这里大家可能明白了,可能ruby.taobao之前我使用的时候是http的,现在改为https,所以会导致一开始的错误. K:bootstrap-sass-3.3.5 maizhikun$ gem source -l *** CURRENT SOURCES *** http://ruby.taobao.org/ https://ruby.taobao.org/ //额,,常见的权限问题.. K:bootstrap-sass-3.3.5 maizhikun$ gem install sass Fetching: sass-3.4.19.gem (100%) ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory. //找到提示的目录更改权限 原本权限是755,改为775还是不行,于是777~...然后就可以下载了..但是报了另外一个权限问题 K:bootstrap-sass-3.3.5 maizhikun$ gem install sass Fetching: sass-3.4.19.gem (100%) ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /usr/bin directory. //于是机智的我..发现这样chmod不是办法...sudo试试... K:bootstrap-sass-3.3.5 maizhikun$ sudo gem install sass Successfully installed sass-3.4.19 Parsing documentation for sass-3.4.19 Installing ri documentation for sass-3.4.19 Done installing documentation for sass after 5 seconds WARNING: Unable to pull data from 'http://ruby.taobao.org/': bad response Not Found 404 (http://ruby.taobao.org/latest_specs.4.8.gz) 1 gem installed //管她呢.....WARNING而已..不理...不理....就好像上班迟到收警告一样~..

让我们见证一下奇迹吧.

K:bootstrap-sass-3.3.5 maizhikun$ sass -v Sass 3.4.19 (Selective Steve)

OK了,准备爽一发吧.

1 简单实践

sass _bootstrap.scss test2.css

会生成test2.css和test2.css.map

sass _bootstrap.scss

会在控制台显示转化的代码

SASS提供的四种编译风格选项 官网参考

3.1 nested: 默认值,嵌套缩进css代码.

3.2 expanded: 没有缩进、拓展的css代码.

3.3 compact: 简洁格式的css代码.

3.4 compressed: 压缩后的css代码.

例子: sass --style compressed test.sass test.css

sass监听某个文件/目录,一旦源文件变动,就自动编译

//watch afile sass --watch input.scss:output.css // watch a directory sass --watch app/sass:public/stylesheets

SASS的官方网站,提供了一个在 线转换器。你可以在那里,试运行下面的各种例子.

2 基本语法

变量

$blue: #1875e7; div{ color : $blue; }

如果变量需要嵌套在字符串上必须加上#{}

$side : left; .rounded{ border-#{$side}-radius: 5px; }

计算功能

body { magin: (14px/2); top: 50px +100px; right: $var * 10%; }

嵌套

标签嵌套

div { hi{ color:red; } }

属性嵌套

//border-color属性 p{ border: { color:red ; } } //注意border后的冒号

嵌套中引用父级级元素

a{ &:hover { color : #ffb3ff; } }

注释

//: 保留在sass不会输出到css /* 注释*/: 会保留在生成的css文件中,但不会保留在压缩模式 /*! 重要信息,任何时候都会保留,一般用作声明版权 */

继承

.class1 {} .class2 { @extend .class1; ... }

Mixin 可重用代码块

//定义代码块 @mixin left { float: left ; } //调用代码块 div{ @include left; } mixin强大在于可以指定参数和缺省值 @mixin left($value: 10px){ margin-right: $value; } //使用 div{ @include left(20px); } //下面实例用来生成浏览器前缀 @mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius; } //调用 #navbar li { @include rounded(top, left); } #footer { @include rounded(top, left, 5px); }

颜色函数

lighten(#cc3, 10%) // #d6d65c darken(#cc3, 10%) // #a3a329 grayscale(#cc3) // #808080 complement(#cc3) // #33c

插入外部文件

@import "path/filename.scss"; @import "foo.css";

高级用法

9.1 if , if else

p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } } @if lightness($color) > 30% { background-color: #000; } @else { background-color: #fff; }

9,2 for,while,each

@for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; } } $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } @each $member in a, b, c, d { .#{$member} { background-image: url("/image/#{$member}.jpg"); } }

9,3 自定义函数

@function double($n) { @return $n * 2; } #sidebar { width: double(5px); } 参考链接

SASS用法指南 http://www.ruanyifeng.com/blog/2012/06/sass.html



相关阅读:
Top