文档章节

Sass新手指南

xihun
 xihun
发布于 2014/02/26 14:45
字数 1782
阅读 122
收藏 4

本文根据Andrew Chalkley的《The Absolute Beginner’s Guide to Sass》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass,以及作者相关信息

——作者:Andrew Chalkley

——译者:大漠

什么是Sass?

Sass是一门非常优秀的CSS预处语言,他是由Hampton Catlin创立的。它可以减化CSS的工作流,使开发者更加容易开发,维护CSS样式。

例如,你是否在特定的样式表中查找和替换一个十六进制的颜色而烦恼?或者你正在寻找一个计算器为多栏布局的宽度计算而头痛?(不用担心,Sass能帮你解决这样的烦恼)。

本文将介绍Sass的一些基本概念,比如说“变量”、“混合参数”、“嵌套”和“选择器继承”等。

Sass和CSS非常相似,但是在Sass中是没有花括号({})和分号(;)的。

如下面的CSS:

#skyscraper_ad { 
  display: block; 
  width: 120px; 
  height: 600px; } 
#leaderboard_ad { 
  display: block; 
  width: 728px; 
  height: 90px; }

在Sass中,上面的CSS代码你要写成下面这样:

#skyscraper_ad 
  display: block 
  width: 120px 
  height: 600px 
#leaderboard_ad 
  display: block 
  width: 728px 
  height: 90px

Sass使用两个空格来定义嵌套的区别。

你现在看过了Sass是如何书写的,接下来我们一起看一些Sass方面的介绍,让Sass在你手中变得不再可怕。

变量(Variables)

在Sass中定义变量,是用“$”符号声明,然后后面跟变量名称。在这个例子中,定义变量“red”,在变量名后使用冒号(:),然后紧跟变量值:

$red: #ff4848

Sass还内置了函数功能,例如变暗(darken)和变亮(lighten),他们可以帮助你修改变量。

在这个例子中,段落要使用一个比“h1”标签更深的红色,就可以这样使用:

$red: #ff4848$fontsize: 12px
h1
  color: $redp
  color: darken($red,10%)

你也可以在相同的变量上做加减运算的操作。如果我们想将颜色变黑,我们也可以在变量的基础上减一个十六进制的颜色,例如“#101”。如果我们想把字号调大“10px”,我们也可以在字号的变量基础上加上这个值。

/*加法和减法*/color: $red - #101font-size: $fontsize + 10px

嵌套(Nesting)

Sass有两种嵌套规则:

选择器嵌套

选择器嵌套是Sass嵌套规则中的第一种。

Sass的嵌套类似于你的HTML嵌套:

$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

如果你看了Sass生成的CSS,你可以看到“.name”嵌套在“.speaker”内,这里生成的CSS选择器是“.speaker .name”。

.speaker .name {  font-weight: bold;
  font-size: 22px;}	.speaker .position {  font-size: 12px;	}

属性嵌套

属性嵌套是Sass嵌套的第二种

相同前缀的属性,你可以进行嵌套:

$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

在上面的例子中,我们有一个“font:”,在新的一行增加两个空格放置他的属性(通常我们看到的是使用连字符“-”来连接)。

因此我们先写“font:”属性,然后断行空两格,写“weight:”属性,在CSS中就变成了“font-weight:”属性。

.speaker .name {  font-weight: bold;
  font-size: 22px;}	.speaker .position {  font-size: 12px;	}

所有连字符的选择器都支持。

这种嵌套用来组织你的CSS结构是非常棒的,可以让你不在写一些重复的代码。

混合(Mixins)

混合是Sass中另一个很优秀的特性。混合可以让你定义一整块的Sass代码,甚至你可以给他们定义参数,更酷的是你还可以设置默认值。

使用关键词“@mixin”来定义Sass的混合,你可以你自己的喜好定义一个混合的名称。如果你需要设置一些参数,你还可以将参数设置到这些代码片段中;如果你需要设置默认值,你也可以在混合的代码片段中设置默认值。

调用混合代码片段,可以使用Sass中的关键词“@include”调用,并在其后面跟上你的混合代码片段的名称,你还可以使用括号,在里面设置一些参数。

来看一个简单的例子:

@mixin border-radius($amount: 5px)
  -moz-border-radius: $amount
  -webkit-border-radius: $amount
  border-radius: $amounth1  @include border-radius(2px)
.speaker  @include border-radius

上面的Sass代码将转译成下面的CSS代码:

h1 {  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;}	.speaker {  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;}

我们给“h1”元素指定了一个特定的圆角值,但是并没有给“.speaker”指定任何值,因此他将使用的是默认值“5px”。

选择器继承

选择器的继承可以让你的选择器继承另一个选择器的所有样式风格,这是一个非常优秀的特性。

使用选择器的继承,要使用Sass的关键词“@extend”,后而跟上你需要继承的选择器,那么这个选择器就会继承另一个选择器的所有样式。(当然他们是有继承和被继承的关系)

h1  border: 4px solid #ff9aa9.speaker  @extend h1
  border-width: 2px

上面的Sass代码将转译成下面的CSS代码:

h1,.speaker {  border: 4px solid #ff9aa9;}.speaker {  border-width: 2px;}

尝试Sass

网上尝试

如果你的本地电脑没有安装Sass,你可以在网上尝试使用。

在转译之前,你需要选择底部的“Indented Syntax”选项。

安装

Sass是一个Ruby gem。如果你的本地已经安装了Ruby gems,那么可以在你命令终端直接运行:

gem install sass

Sass也可以使用命令行工具将Sass文件转译成CSS文件。

你可以键入“sass --watch sass_folder:stylesheets_folder”,这个时候你的Sass文件(文件扩展名必须是.sass)stylesheets_folder就会把转译的样式文件保存在“sass_folder”目录,当然你的sass文件必须保存在这个文件目录中。“--watch”选项的意思就是将这个目录中的sass文件转译成样式文件。

CSS转换成Sass

在现有的项目中通过“sass-convert”使用sass。

在终端进入你的目录中,键入“sass-convert --from css --to sass -R .”。将CSS转换成Sass。其中“-R”表示递归,“.”表示当前目录。

Scss

在这里我们只介绍了Sass的语法,然后还有一个新的名称叫SCSS或者Sassy CSS。不同的是SCSS看起来更像CSS,但他也像Sass一样具有变量、混合、嵌套和选择器继承等特性。

总结

在你组织和管理CSS时,Sass真的很优秀。还有个项目Compass,它在CSS框架中使用混合模式,而不是去修改你的HTML结构或者重新定义你的类名。

那你还在等什么呢?在你的下一个项目中就尝试使用Sass吧。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载烦请注明出处:

英文原文:http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass

中文译文:http://www.w3cplus.com/css/the-absolute-beginners-guide-to-sass.html

本文转载自:http://www.w3cplus.com/css/the-absolute-beginners-guide-to-sass.html

xihun
粉丝 0
博文 3
码字总数 0
作品 0
厦门
程序员
私信 提问
【写书评赠书活动】《Sass和Compass设计师指南》获奖名单公布

本次书评活动详情在这里。 《Sass和Compass设计师指南》的豆瓣链接。 恭喜以下参与书评的童鞋,每人获得一本《Sass和Compass设计师指南》,奖品由 @七印部落 提供! @理工小强 @benbenming ...

七印部落
2014/06/25
138
0
SASS用法指南

学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有...

阮一峰
2012/06/19
0
0
SASS 用法指南

学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有...

小编辑
2012/06/25
6.8K
13
SASS入门教程及用法指南

作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,不可以引用等等。面对这...

进步的蜗牛
2016/02/26
75
0
功能强大的滚动库 - t-scroll

t-scroll 是一个功能强大且易于使用的滚动库,提供有用的选项和动画。 功能特性 完全可定制:有超过45种选项。对新手用户友好,对高级开发人员实用。 ES6 / Babel:不使用 jQuery,使用 ES6。...

匿名
2017/12/07
502
0

没有更多内容

加载失败,请刷新页面

加载更多

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
56分钟前
11
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
4
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.2K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部