文档章节

Sass和LESS-动态CSS技术

dhb_oschina
 dhb_oschina
发布于 2016/05/17 15:07
字数 1653
阅读 114
收藏 1

一、简介

 

二、Sass/Scss的使用

变量

 

注释

css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写,以及简单的样式说明。但是,你也并不希望每个浏览网站源码的人都能看到所有注释。 因此,scss注释方式有两种:

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

混合宏mixin VS 继承 VS 占位符

什么时候用混合宏,什么时候用继承,什么时候使用占位符?三者各有优缺点,详细比较可以参考 http://www.imooc.com/code/7041  ,总的来说就是:
优先使用占位符,如果一定需要基类则用继承,如果需要传递参数则使用混合宏mixin。

下图同样是上面链接中关于三者比较的一张图片。

运算

运算包括数字运算、变量运算

数字运算包括:加法、减法、乘法和除法等运算,

SASS的编译输出格式

Sass/Scss 编译后生成的CSS的式样格式有:

  • expanded
  • nested
  • compact
  • compressed

其中expanded是默认的格式,和我们平时手动书写CSS的一致,所有式样都是展开的。

nested:输出CSS是,根据在Scss中的“嵌套”显示相应的缩进,嵌套的越深,缩进的越多。

compact:将每个选择器的所有的属性汇总到一行,这时大家更多的关注是选择器的关系而不选择器的

compressed:将所有选择器的所有属性都汇总到一行,最不具备可读性,但是占用空间最少。

Sass与Compass

Sass如上面所述的,是CSS的动态生成技术,只是一个编译器,而Compass则在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能。它们之间的关系,有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。我们可以把Sass当成钉子,那么Compass就相当与锤子,它们都是工具,都可以使得我们的效率得到提高。但是compass + sass ,也就是说“锤子”+“钉子”的工具组合,可以使得我们开发CSS的效率上个台阶。

因此,简单说,Compass是Sass的工具库(toolkit)和式样库。

安装和使用compass

Compass的安装很简单,通过如下命令:

gem instal compass 

然后便可以通过’compass  -v’命令查看版本。

然后通过‘compass -h’可以查看命令的帮助:

compass -h
Usage: compass help [command]

Description:
  The Compass Stylesheet Authoring Framework helps you
  build and maintain your stylesheets and makes it easy
  for you to use stylesheet libraries provided by others.

Donating:
  Compass is charityware. If you find it useful please make a tax deductable donation: http://umdf.org/compass

To get help on a particular command please specify the command.

Primary Commands:
  * clean       - Remove generated files and the sass cache
  * compile     - Compile Sass stylesheets to CSS
  * create      - Create a new compass project
  * init        - Add compass to an existing project
  * watch       - Compile Sass stylesheets to CSS when they change Other Commands:
  * config      - Generate a configuration file for the provided command line options.
  * extension   - Manage the list of compass extensions on your system
  * frameworks  - List the available frameworks
  * help        - Get help on a compass command or extension
  * imports     - Emit an imports suitable for passing to the sass command-line.

  * install     - Install an extension's pattern into your compass project
  * interactive - Interactively evaluate SassScript
  * sprite      - Generate an import for your sprites.
  * stats       - Report statistics about your stylesheets
  * unpack      - Copy an extension into your extensions folder.
  * validate    - Validate your generated css.
  * version     - Print out version information

Available Frameworks & Patterns:

  * compass
    - compass/ellipsis  - Plugin for cross-browser ellipsis truncated text.
    - compass/extension - Generate a compass extension.
    - compass/project   - The default project layout.

Global Options:
    -r, --require LIBRARY            Require the given ruby LIBRARY before running commands.
                                       This is used to access compass plugins without having a
                                       project configuration file.
    -l, --load FRAMEWORK_DIR         Load the framework or extensions found in the FRAMEWORK directory.
    -L, --load-all FRAMEWORKS_DIR    Load all the frameworks or extensions found in the FRAMEWORKS_DIR directory.
    -I, --import-path IMPORT_PATH    Makes files under the IMPORT_PATH folder findable by Sass's @import directive.
    -q, --quiet                      Quiet mode.
        --trace                      Show a full stacktrace on error
        --force                      Allows compass to overwrite existing files.

        --boring                     Turn off colorized output.
    -?, -h, --help                   Show this message

新建compass bootstrap-sass项目

新建一个compass Bootstrap-sass项目的方法如下:

# gem install bootstrap-sass
# compass create my-new-project -r bootstrap-sass --using bootstrap
# compass watch my-new-project   

也就是在Bootstrap-sass官方项目的同一层级目录下,通过compass命令拷贝bootstrap-sass项目的文件到新建的compass项目中,最后通过‘compass watch my-new-project ’命令监察.scss 文件的变更,自动生成相应的css文件。

项目创建成功后的输出信息如下:

directory my-new-project/
directory my-new-project/fonts/bootstrap/
directory my-new-project/javascripts/
directory my-new-project/javascripts/bootstrap/
directory my-new-project/sass/
directory my-new-project/stylesheets/
   create my-new-project/config.rb
   create my-new-project/sass/styles.scss
   create my-new-project/sass/_bootstrap-variables.scss
   create my-new-project/javascripts/bootstrap/affix.js
   create my-new-project/javascripts/bootstrap/alert.js
   create my-new-project/javascripts/bootstrap/button.js
   create my-new-project/javascripts/bootstrap/carousel.js
   create my-new-project/javascripts/bootstrap/collapse.js
   create my-new-project/javascripts/bootstrap/dropdown.js
   create my-new-project/javascripts/bootstrap/modal.js
   create my-new-project/javascripts/bootstrap/popover.js
   create my-new-project/javascripts/bootstrap/scrollspy.js
   create my-new-project/javascripts/bootstrap/tab.js
   create my-new-project/javascripts/bootstrap/tooltip.js
   create my-new-project/javascripts/bootstrap/transition.js
   create my-new-project/javascripts/bootstrap-sprockets.js
   create my-new-project/javascripts/bootstrap.js
   create my-new-project/javascripts/bootstrap.min.js
   create my-new-project/fonts/bootstrap/glyphicons-halflings-regular.eot
   create my-new-project/fonts/bootstrap/glyphicons-halflings-regular.svg
   create my-new-project/fonts/bootstrap/glyphicons-halflings-regular.ttf
   create my-new-project/fonts/bootstrap/glyphicons-halflings-regular.woff
   create my-new-project/fonts/bootstrap/glyphicons-halflings-regular.woff2
    write my-new-project/stylesheets/styles.css

*********************************************************************
Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets.

You can configure your project by editing the config.rb configuration file.

You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]

自定义Bootstrap的方法

1. 拷贝 _bootstrap.scss 到 my-new-project/sass/ 目录下,并重命名为自定义名字 _bootstrap-custom.scss

2. 修改my-new-project/sass/styles.scss 文件

将
@import 'bootstrap';
替换为:
@import 'bootstrap-custom';

3. 修改_bootstrap-custom.scss,自定义所需的bootstrap模块。修改_bootstrap-variables.sass,调整颜色尺寸等。

4. 因为执行了’compass watch my-new-project’命令,因此会compass会自动监测.sass文件的变更,并重新生成相应的styles.css的文件。

# compass watch my-new-project
>>> Compass is watching for changes. Press Ctrl-C to Stop.
    write my-new-project/stylesheets/styles.css
 modified my-new-project/sass/_bootstrap-custom.scss
    write my-new-project/stylesheets/styles.css
 modified my-new-project/sass/_bootstrap-custom.scss
    write my-new-project/stylesheets/styles.css

 

总结下,通过SASS+Compass+Bootstrap,我们既可以利用SASS强大的编程能力,Compass强大的底层函数,又可以获取Bootstrap丰富的UI组件支持。

 

X、参考&引用

© 著作权归作者所有

dhb_oschina
粉丝 10
博文 221
码字总数 190651
作品 0
程序员
私信 提问
compass&sass高级应用

一./背景知识/ 1.Sass是什么?   Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易!例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一...

Billydotzhang
2016/10/27
15
0
动态样式语言Scss&Less介绍与区别

一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读。Sass语法类似与Haml,属于缩排语法(...

随影求是
2012/03/27
266
0
通过LESS/Sass自定义Bootstrap的式样

一、定制Bootstrap 在实际前端UI开发中,对Bootstrap的式样进行自定义是必要的。 定制Boostrap的式样的方法通常有如下几种: 覆盖原有的bootstrap式样 通过构建器,对bootstrap中的式样变量自...

dhb_oschina
2016/05/21
318
0
为开发者准备的11个新鲜方便的框架

【IT168 技术】框架被看做是帮助开发者快速设计和开发动态站点的软件应用程序。每个月都会有无数的框架经由一些开发者发布出来,让开发过程变得简单而高效。   本文中我收集了11个新鲜而有...

开源中国社区
2013/10/25
0
0
学习之路/CSS扩展语言SASS

CSS扩展语言SASS学习 欢迎阅读我所有的学习之路系列文章: 学习之路系类文章目录 介绍 SASS官网: Sass is the most mature, stable, and powerful professional grade CSS extension langua...

DennisGuo
2015/11/23
102
2

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部