- Sass and media queries
本书最后一章.
我希望本书能一直聚焦在sass的基本应用上, 以此来证明sass不需要扰乱你本身现有的工作流. 但是在最后一章, 我还是想要讨论一些使用Sass和Media Queries部分的高级技巧, 这些技巧已经帮助我简化了很多css中非常复杂的地方.
Sass的强大超出你的想象.利用一些变量和几个mixin就能让你的生活变得简单许多. 但是它也可以做很多除以之外的部分. 在这里我希望能分享的是我是如何利用Sass来制作响应式布局以及高保真的项目的, 以及它是如何再次把附在的事情变得非常易于管理的.
嵌套的Media Queries
响应式布局站点的奠基石之一就是Media Q...
- 续前篇(CSS3 Loves Mixins)Border-radius在CSS3中,对圆角的处理方式为:
123456@mixin rounded($radius){ -webkit-border-radius:$radius; -moz-border-radius:$radius; border-radius:$radius;}
通过调用此mixin,就可以实现将任何元素变成圆角~范例略(这里传递的参数是半径长度值:3px).对应的编译(略)
Border-shadow
一下是另一个使用多参数的例子: 一个用来创建下投阴影的CSS3片段,可以让我们传递对应阴影的横向和纵向位置参数,以及模糊的程度以及颜色值:
...
- 这个是”Sass for web designers”一书的第二章:
SASS的工作流
既然我们都知道了SASS是什么,就让我们开始切实的使用以下它吧. 我们首先需要做的就是安装,把Sass安装到你的电脑之中.我在第一章中提到SASS是一个用Ruby写的程序,将它的语法翻译成CSS的结构. 所以,在我们开始使用Sass之前,我们需要先安装Sass.
在MAC上安装SASS
如果你是Mac用户(恭喜你,你是如此幸运!),安装Sass会非常简单. Mac OS X预装了Ruby,而Sass作为一个Ruby的一个”GEM”,非常贴切的一个术语,对Ruby的程序而言.
你可以开启你的Terminal(终端)–不要恐惧哈~...
- 第三章--使用SASS
在这一章, 我会分享许多我每天使用的一些sass的特性~ 我特意为此书建了一个虚拟的项目来演示对应的功能~
项目名称是Sasquatch Records–一个简单的关注一种神秘生物-大足野人的超自然音乐风格(?). Sass的功能是非常强大的–它是一个非常强力的工具, 可以让你更加轻松理智的创造复杂的样式文件. 有这么多的可能性,随我们处理, 我喜欢先说一下我认为对网页设计者们最有价值的部分, 同时也是最容易转化为你自己的部分.
嵌套规则
利用sass可以在css规则中相互嵌套而不是重复的在不同的声明中使用选择器. 这个嵌套功能反映了一个典型的标记语言的结构特征.
例如, 针对Sasquatch Reco...
- 本文继续 “SASS for web designers” 这本书~ 这是续 Why Sass? 这一章的遗漏,全书共分为四章,我会尽量都过一遍~哈
============正文=============
在Sass中实际上是有两种不同的语法的.比较新的一种是之前提到的SCSS语法,SCSS文件会以.scss结尾.这也是我比较倾向的一种语法,理由如下:
因为SCSS是基于CSS,是CSS的一个父集, 所以我可以依然按照过去十年写CSS那样写SCSS,而不用担心它不能识别;
它可以允许你一步步的将现有的css样式转换为sass的结构;
它不会导致一个很突兀的代码风格转变;
一个简单的SCSS例子
...
- 好久不写HCI翻译项目了恩,拾起哈===========================================正文===============================原作者:DAN CEDERHOLM @ November 13,2013
原文备注: 这是DAN CEDERHOLM<<Sass For Web Designers>> 一书的一部分摘要.
正文:
我并不是一个Sass的虔诚信奉者. 我一般都是自己写样式表! 我不需要任何帮助!而且我当然不想要给我的工作增加任何的复杂成分.所以,请走开(Sass)!
无论如何,这是最初的想法.但是实际上,Sass以及其他的CSS预处理程序都可以...