为什么使用Sass

作为前端(html、javascript、css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了、javascript由于NODE.JS而成为目前前后端统一开发语言的不二之选。只有css似乎成为前端开发的被忽视的角色了。

Sass让css有了动态语言的特点,在初次学习css时,有时候同样的样式在不同的#或.中一次又一次重复的编码,有了Sass,在css语法的基础上不仅可以写变量、函数,而且可以百分百的转换为标准的css。再次把Don‘t Repeat Yourself进行到底,降低了“码农”的工作量,提高了效率。而且现在越来越多的优秀开发人员专门利用sass和compass构建出非常优秀的前端样式开发框架(如,Button),再一次提高我们的生产力。

准备条件

在安装和使用sass之前,需要一些准备条件:

  1. 文件夹---存放.scss 或 .sass;

  2. 编辑器,我们推荐使用Sublime Text 2 或者 3

  3. 你的电脑需要安装Ruby,因为sass是依赖于Ruby的。在windows需要自己手动下载Ruby的。

安装Sass

使用命令行安装sass:

gem install sass

使用命令,查看是否安装成功,如下显示表示安装成功:

$ sass -v
Sass 3.3.8 (Maptastic Maple)

简单使用Sass

在sass文件夹下创建demo1.scss文件,内容:

$myColor: #ccc;

#page {
    color: $myColor;
}

使用命令行:

sass demo1.scss demo1.css

会在同一个文件夹下生成一个demo1.css文件,内容:

#page {
    color: #cccccc; }

提高生产力的Sass

如下,在学习sass之前我们大概都是这么来写css的:

ul.nav {float: right}
ul.nav li {float: left;}
ul.nav li a {color: #111}
ul.nav li.current {font-weight: bold;}

但,有了sass后,那就方便多了:

ul.nav {
    float: right;

    li {
        float: left;

        a {
            color: #111;
        }
        &.current {
            font-weight: bold;
        }
    }
}

通过编译,得到css:

ul.nav {
  float: right; }
    ul.nav li {
      float: left; }
      ul.nav li a {
        color: #111; }
      ul.nav li.current {
        font-weight: bold; }

除了排版不一样之外,再也看不出有什么区别。但使用sass写出来的样式结构,不仅层次分明,意思明确,而且编码量明显减少。

转自:http://www.yemeishu.com/%E5%AD%A6%E4%B9%A0sass%E4%B9%8B%E5%AE%89%E8%A3%85sass%EF%BC%88%E4%B8%80%EF%BC%89/

学习Sass之安装Sass(一)的更多相关文章

  1. 学习Sass之安装Sass

    学习Sass之安装Sass 为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE ...

  2. Sass学习之路:Sass、Compass安装与命令行

    导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...

  3. 在sublime text3中安装sass编译scss文件

    一 搭建环境 首先安装ruby环境,不然会编译失败,在这里下载ruby ,安装的时候选择第二项 在cmd中输入gem -v 显示版本号说明ruby安装成功 待ruby安装成功后,在cmd中输入 gem ...

  4. Sass学习之路(2)——Sass环境安装(windows版)

    因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦.(希望有朋友可以赞助我一个mac(┳_┳)): 第一步:安装ruby 因为Sass是基于ruby编写的,所以先去官 ...

  5. SASS学习笔记1 —— 安装、编译和调试

    一.什么是SASS SASS是一种"CSS预处理器"(css preprocessor)的开发工具,为CSS加入编程元素,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的 ...

  6. 轻松学习Ionic (三) 安装sass并在webstorm中为scss添加watcher

    1. 安装Ruby 最新为 2.1.5版本,不放心的话安装 Ruby 1.9.3-p551    安装过程中注意勾选上第二项!即将Ruby加入到可执行的环境变量中去.       安装结束后在命令行中 ...

  7. 安装了ruby后怎么安装sass

    在命令行中输入 ruby -v 查看版本号 先移除默认的https://rubygems.org源,命令为gem sources --remove https://rubygems.org/,按回车 ...

  8. Sublime Text 3编译Sass - Sublime Text安装Sass插件

    1.首先要安装sass,安装流程: http://www.w3cplus.com/sassguide/install.html 2.sublime text安装Package Control(已经安装 ...

  9. 前端工具HBuilder安装Sass插件

    HBuilder自带未安装的less插件,但是sass插件却没有,需要自己安装,步骤如下: 1.安装sass,参考: http://www.w3cplus.com/sassguide/install. ...

随机推荐

  1. 数据库备份并分离日志表(按月)sh 脚本

    #!/bin/sh year=`date +%Y` month=`date +%m` day=`date +%d` hour=`date +%H` dir="/data/dbbackup/f ...

  2. js判断鼠标向上滚动并浮动导航

    <div id="Jnav"> <ul class="nav"> <li><a href="#"& ...

  3. 【iCore3 双核心板】例程三:EXTI中断输入实验——读取ARM按键状态

    实验指导书及代码包下载: http://pan.baidu.com/s/1o6xToN4 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  4. AutoIT简介

    AutoIT最初是为了帮助IT管理和维护而开发的工具,能自动完成软件的安装.由于自动化安装和自动化测试在功能需求上有许多相似之处,都要模拟用户对软件进行操作,并验证执行的结果,所以,AutoIT逐渐成 ...

  5. HMM隐马尔科夫模型

    这是一个非常重要的模型,凡是学统计学.机器学习.数据挖掘的人都应该彻底搞懂. python包: hmmlearn 0.2.0 https://github.com/hmmlearn/hmmlearn ...

  6. LeetCode104: Maximum Depth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  7. for循环里面的判断条件

    先看下面这段代码,你很容易猜到结果 for(i=0;i<10;i++){ console.log(i); // 结果是打印出 1,2,3,4,5,6,7,8,9 } 再看一下这款代码,也许很容易 ...

  8. VS2015 Cordova Ionic移动开发(五)

    一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideMenu和Ionic Tabs项目.将SideMenu和Tabs项目里的templates和js文件合 ...

  9. ThinkPHP - URL - 伪静态 - 路由 - 重写

    URL: 一.URL规则 1.默认是区分大小写,可以修改(配置文件)为不区分大小写. 2. //修改URL大小写问题 'URL_CASE_INSENSITIVE' =>true, 如果模块名为 ...

  10. 杭电OJ——1011 Starship Troopers(dfs + 树形dp)

    Starship Troopers Problem Description You, the leader of Starship Troopers, are sent to destroy a ba ...