CSS——sass & compass

好的代码习惯:应该是注释占用整个篇幅的2/3。

慕课网学习笔记:(http://www.imooc.com/learn/364

1.理论基础:

sass_Syntactically Awesome StyleSheets

sass如同锤子,compass如同锤子,而css如同锤子和钉子完美应用的产品。

sass和compass的好处:

  • 使用sass和compass可以写出更优秀的css;
  • 解决css编写过程中的痛点问题,如精灵图合图问题;
  • 有效组织样式、图片、字体等项目元素。

2.sass的安装和命令行使用

》简介:

官网:http://sass-lang.com/

.sass ->类ruby语法

.scss ->类css语法,3.0以后

》安装

安装ruby环境 www.ruby-lang.org/en/

安装rvm  rvm.io

安装gpg2  使用brew安装(cakebrew)

安装好ruby后:

gem install sass (--version=3.3.0)

》sass编译,但是一般不使用sass编译,一般使用compass。

sass xxx.scss xxx.css

》compass compass-style.org

compass is an open-source CSS Authoring Framework.  是一个开源的css书写工具

mixin 类似函数

>安装compass(需要root权限,写入资源库文件)

sudo gem install compass

>创建目录,然后创建项目(最后一个参数是项目名称)

compass create learn-compass-init

回显的最后一段话:

_开头的文件是局部文件,不会单独生成css文件,用于被其他文件引入;

config.rb文件用于配置项目;

compass compile (当前路径下直接执行即可,也可以加上文件路径)

compass watch (监听项目中的改变并自动编译)

》sass将scss和sass文件进行转换

sass-convert main.scss main.sass

2.Sass语法介绍-基础篇

目标页面:

1》字体:使用@import引入_文件实现:

compass 使用插件机制引入normalize 来替换reset

2》compass继承了css的import机制,但是进行了进一步优化,只有在以下4种情况下会使用css原生的import机制

compass的import优化机制:

注意:有下划线和没有下划线可认为同名,不允许。 引入_文件时可以不写_

3》注释。项目结构:

4》类别嵌套形式,注意:hover要添加&,这样才能在css去掉默认的空格

也支持属性嵌套

生成的css文件:

进阶篇和高阶篇暂不学习,等实际应用上再学习,否则也会忘掉。

时间: 2024-07-28 14:49:12

CSS——sass & compass的相关文章

sass+compass起步

前言:Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organize

译:Grunt编译sass&compass和压缩js的工作流程

原文:Grunt workflow for compiling Sass & Compass and minifying Javascript 以前,我们安装Node,NPM和Grunt还包括建立的一个package.json文件和一个Gruntfile文件.在这篇让人兴奋的文章中,我们将会填补一切,你会领会到Grunt是多么的让人吃惊,体验一下他让人敬畏的力量,就像慵懒的沐浴在温暖的阳光下一样让人满意. 如果你还没有安装Node,NPM和Grunt 那就需要先安装好这些东西(真的不难也不可怕)

SASS+COMPASS 自适应 学习笔记

来源 http://snugug.github.io/RWD-with-Sass-Compass/#/ 1 安装 COMPASS 扩展 安装 方式 gem 'extension', '~>X.Y.Z' 命令行安装 require '{extension}' @import '{extension}'; sass 文件导入   扩展1 http://breakpoint-sass.com/ 扩展2 http://singularity.gs/ 3 盒子模型 @import 'compass'; /

强悍的CSS工具组合:Blueprint, Sass, Compass

掌握CSS是每个Web开发者的基本要求,虽然CSS本身并不复杂,但怎样写出支持所有主流浏览器(特别是IE)的CSS,以及在大型网站中如何有序地组织好CSS结构却是一个相当棘手的问题.我更多的是一个开发者,而不是一个设计师,却不幸花了大量时间处理CSS这些棘手问题,如果能有一些工具能帮我处理这些问题,那将很有意义.经过一段时间的搜索和研究,还真发现了几个很棒的工具,感觉真是相见恨晚,与大家分享之. Blueprint CSS Framework 刚才说过了,处理浏览噐的不一致性是很困难的事情.每开

windows下,ruby环境的安装,与sass,compass的使用方法

cmd下:ruby -v  成功 安装使用sass 1:移除http://rubygems.org源 gem sources  --remove  https://rubygems.org/ 2: 添加taobao源 gem sources  -a  https://ruby.taobao.org/ 3: 查看前两步是否操作成功 gem sources  -l 4: 安装sass gem install  sass sass -v 5: gem升级 gem  update 6: 安装制定版本的s

sass & Compass in action 读书笔记

第1章:认识sass和compass DRY:Don't repeat yourself Sass支持两种语法:一种是以.sass为后缀,这种语法对空格敏感,所以选择器下边的属性要缩进,不同属性用换行区分. 一种是以.scss为后缀,scss即sassy css,在sass3.0中引进,可以用分号和花括号. Sass新特性:变量,混合器.选择器嵌套.选择器继承.

我给自己的Sass+Compass,在Windows下写个bat,快速cd到我的sass目录

在Windows下,我总是要打开Ruby的cmd来进行Sass,其中要写好多cd,次数多了,自己的多敲,的确能记得更牢靠,但是无形中会浪费自己的一点点敲cd命令的时间,所以我想到自己在windows下,能快速达到我要compass watch的目录,嘻嘻. @echo on @echo Hallmarkbaby Sass date/t C: D: cd .. cd wamp cd www cd hallpando cd templates cd hallmarkbaby cd css date/

sass,compass让开发效率飞起

最近开始学习并且使用,发现使用它写起css来真的是各种爽 安装sass,compass sass是依赖于ruby的,必须先安装Ruby,点击下载 下载完ruby之后,使用命令行安装sass        gem install sass 使用命令,sass-v    compass-v   查看是否安装成功 出现上图情况则为安装成功 sass的使用及优点 sass官网: http://www.w3cplus.com/sassguide/ sass功能: 定义变量,数值计算(左边为scss文件,右

CSS/SASS框架-----Susy

1.简述,唯一的要求是安装SASS,Susy是Compass系统的一部分,建议使用的工具,Breakpoint, Vertical Rhythms. 1.1 Breakpoint 是在css中插入media queries. 1.2 Vertical Reythms 垂直规律指的的文本的排版和间距,文字大小,行高,内距,外距(font-size;line-height;margin-top;margin-bottom,当然涉及border的时候需要一些简单数学计算.) *compass Vert