Sass入门

0 前面工作

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

  3. 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 简单实践

  1. sass _bootstrap.scss test2.css

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

  2. sass _bootstrap.scss

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

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

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

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

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

    3.4 compressed: 压缩后的css代码.

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

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

     //watch afile 
 sass --watch input.scss:output.css

 // watch a directory 

 sass --watch app/sass:public/stylesheets

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

2 基本语法

  1. 变量

     $blue: #1875e7;

 div{
     color : $blue;
 }

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

     $side : left;

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

  2. 计算功能

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

  3. 嵌套

    标签嵌套

     div {
     hi{
         color:red;
     }
 }

    属性嵌套

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

    嵌套中引用父级级元素

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

  4. 注释

     //: 保留在sass不会输出到css

 /* 注释*/: 会保留在生成的css文件中,但不会保留在压缩模式

 /*!
     重要信息,任何时候都会保留,一般用作声明版权
 */

  5. 继承

     .class1 {}

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

  6. 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); }

  7. 颜色函数

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

  8. 插入外部文件

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

  9. 高级用法

    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

后续遇到的问题

  1. sass 普通命令能使用 但是监听文件就报错

     K:sass maizhikun$ sass --watch _bootstrap.scss:../CSS/Haplox.css
 >>> Sass is watching for changes. Press Ctrl-C to stop.
 I, [2015-10-21T09:34:38.749464 #4396]  INFO -- : Celluloid 0.17.2 is running in BACKPORTED mode. [ http://git.io/vJf3J ]
 ArgumentError: wrong number of arguments (2 for 1)
 Use --trace for backtrace.

    然后Mac搜索Gemfile,居然在握的octopress文件夹里….

前端

Comments