sass相关

13 January 2015

前言

出于一个特殊的原因，全栈式工程师的理想。总之，我最近在学css。我其实是想学习一下sass和less的。以下就是关于sass的探索。

简介

css无法编程，css预处理器为css加入编程元素。

注: css预处理器挺多的，个人觉得值得学习的只有Less和Sass。Less存在js版的，Sass只有Ruby版的。

安装

SASS是Ruby的gem包，安装为gem install sass。在Rails项目中使用sass，在Gemfile中引入sass-rails(依赖sass)。

安装之后，sass会提供sass的命令行工具，其提供了四种编译风格选项( -t , –style):

  • nested：嵌套缩进的css代码，它是默认值。
  • expanded：没有缩进的、扩展的css代码。
  • compact：简洁格式的css代码。
  • compressed：压缩后的css代码。

sass可以监听特定文件和目录，使其变动后，就自动编译文件。

基本使用

sass中可以使用变量、计算、嵌套、继承、Mixin、颜色函数、插入文件、条件语句，循环语句以及更多注释。

Tip: 关于Less， Sass，Scss，以及Compass之间的关系和区别?
sass: 2007年出现，最早最成熟的css预处理器，Ruby社区和Compass支持
Less: 2009年出来的css预编译器，使用css语法
scss: sass受less的影响，从而进化过来的版本。 Compass: sass成员创建的样式框架，其中定义了大量Mixin、函数以及sass扩展。

一遍一遍的看sass语法一点意思都没有，想办法实践一下。比如，将样式转换为scss，转换的过程中，主要使用嵌套。目测了一下， 没有破坏其原有的功能。Ok，搞定收工了。

bootstrap-sass

bootstrap-sass是Sass版的Bootstrap，可直接应用到使用Sass的应用程序中。存在三种不同的安装环境: Rails、Compass、 Bower，以下分别介绍:

Rails

在Gemfile中加入bootstrap-sass和sass-rails，即可使用bootstrap-sass。推荐安装autoprefixer gem包，从而可以自 动添加浏览器前缀。

然后，在app/assets/stylesheets/application.css.scss中使用如下的代码导入bootstrap样式:

// "bootstrap-sprockets"必须在"bootstrap"和"bootstrap/variables"之前引入
@import "bootstrap-sprockets";
@import "bootstrap";

在app/assets/javascripts/application.js中，加载Bootstrap的js:

//= require jquery
//= require bootstrap-sprockets

备注: 在公司的项目中，并没有这么麻烦的引入，而是直接使用的压缩过的文件(min文件)。

Compass

在Compass中使用，需要先安装bootstrap-sass，然后，在其config.rb文件中加载gem包(require 'bootstrap-sass')。

目前，不想涉及bower中安装bootstrap。

配置

默认会引入bootstrap的所有。如果想要显式定制bootstrap，将_bootstrap.scss内容复制到_bootstrap-custom.scss， 去掉不想要的，然后，在应用重引入@import 'bootstrap-custom';。

js也可以定制化引入，但是，js插件之间，存在依赖关系，需要小心处理。

字体的引用路径为: "#{$icon-font-path}#{$icon-font-name}.eot", 其中，$icon-font-path默认为bootstrap。

当bootstrap-sass与compass、Sprockets、以及Mincer配置使用时，需要在bootstrap之前import相关方法。

问题

在.content样式中，添加了一个position: relative;，屏幕滚动就挂了，我觉得，样式控制真是一个强大的工具。

使用css布局，最重要的就要理解css中的盒子模型(box-model)，盒子模型中最重要就是三个属性: 内边距(padding), 边框(border), 外边距(margin)。

后记

感觉，sass唯一的好处，就是减少了部分的重复，让css代码写起来更加的结构化，改起来更加方便。

感觉，不太能明白seo的js代码的含义，有空去研究研究。

参考文献

  1. sass官方网站
  2. sass用法指南
  3. sass Github地址
  4. bootstrap-sass Github地址
  5. Sass Guidelines


傲娇的使用Disqus