首页 > 代码库 > Sass与Compass 学习笔记

Sass与Compass 学习笔记

2024-10-24 05:56:02   210人阅读

Sass与Compass 学习笔记

安装：

　　1、装sass之前先确认装了ruby ;

　　2、命令gem install sass *注一般不能正常安装　　　　

           由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了，关于常用gem source命令可参看：常用的gem source

 

$ gem sources --remove https://rubygems.org/$ gem sources -a https://ruby.taobao.org/$ gem sources -l*** CURRENT SOURCES ***https://ruby.taobao.org# 请确保只有 ruby.taobao.org$ gem install sass

 

　　3、gem install compass

　　4、下载koala 百度搜索一下 这是一个很好的图形化工具，对于我们这种对window命令不喜欢的人来说很好用

 

Sass Css预编译器

强大的嵌套样式编写：

ul{padding:0px;li{margin:5px;float:left;_display:inline;}}

编译后

ul{padding:0px;}ul li{margin:5px;float:left;_display:inline;}

这写法看着就高大上，深深吸引了我！

 

通过@mixin 和 @include 重用代码块

@mixin border-style{border:1px solid #ddd;}.a{@include border-style;}.b{@include border-style;}

编译后

.a{border:1px solid #ddd;}.b{border:1px solid #ddd;}

　　

变量声明：$name:value;

图片精灵：Sprites此功能也深深吸引我，以前都是自己通过ps制作，很烦。当一个图标改变后更是死的心都有了，强烈推荐

 

@import "compass/utilities/_sprites";//引用精灵模块
$icons-layout:horizontal;//精灵排列形式
$icons-sprite-dimensions:true;//是否自动显示每个精灵的尺寸大小
@import "icons/*.png";//精灵图片icon文件（可惜现在只支持png格式图片）

@include all-icons-sprites;//自动生成所有精灵样式

下面我我自己demo

@import "compass/utilities/_sprites";$icons-layout:horizontal;$icons-sprite-dimensions:true;@import "icons/*.png";
@include all-my-icons-sprites;

　　编译后

/* line 64, icons/*.png */.icons-sprite, .icons-icona, .icons-iconb, .icons-iconc { background-image: url(‘/Images/icons-s64f5cf9f9c.png‘); background-repeat: no-repeat; }/* line 84, C:/Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */.icons-icona { background-position: 0 0; height: 32px; width: 32px; }/* line 84, C:/Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */.icons-iconb { background-position: -32px 0; height: 32px; width: 32px; }/* line 84, C:/Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */.icons-iconc { background-position: -64px 0; height: 32px; width: 32px; }

　　技术分享生成后的精灵图片

全部自动生成，而且还很多灵活的方法喜欢的可以自己去官网看看，真的不错！

 

Sass与Compass 学习笔记


联系
我们