资讯专栏INFORMATION COLUMN

Sass & Compass 初步使用

boredream / 3451人阅读

摘要:一需安装的东西自带可能被墙查看安装情况查看的可参考资料如何安装,使用镜像二实操使用终端进入选定的目录初始化编写针对可能用到的命令可能用到的命令针对进入到特定目录后,输入命令方式方式,会创建一个以命名的目录是目录的配置文件,可根据个人

一、需安装的东西

ruby(mac自带)

gem(sources可能被墙)

sass

compass

查看安装情况:

ruby -v
gem -v
sass -v
compass -v

查看 gem 的 sources:

gem sources

可参考资料

如何安装 Ruby、Sass、Compass(Windows,使用 Ruby China 镜像)

二、实操

使用终端进入选定的目录

compass 初始化

sass 编写

针对1:

mac可能用到的命令:

cd xxx
ls

win可能用到的命令:

E:
cd xxx
dir

针对2:

进入到特定目录后,输入命令:

compass init    // 方式1
compass create [project_name]    // 方式2,会创建一个以project_name命名的compass目录

config.rb是compass目录的配置文件,可根据个人需求修改(重要)

针对3:

体验sass的强大吧(与css比较)

// reset
@import "compass/reset";

// css3圆角
@import "compass/css3";
.box{
    @include border-radius(5px);
}

// css3渐层
.box{
    @include background(linear-gradient(lighten(red, 20%), red)); 
}

// sprite
@import "icons/*.png";
@include all-icons-sprites;  //all-后面的‘icons’代表文件夹名字

compass会监测目录下文件变动而进行实时编译(可能需要watch一下)

可参考资料:

用強大的compass+sass寫css

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116464.html

相关文章

  • Intellij IDEA & Sass 使用记录汇总

    摘要:在安装插件很容易,在通用设置窗口里面,选择节点,输入搜索相关插件名称即可。参考链接彻底解决卡顿七解决中文注释错误问题问题描述控制台报错,类似于报错。排查发现是由于中文注释引起。 一、如何查看某端口被占用进程并将其杀死 终端输入以下命令,将会出现占用端口的进程信息: lsof -i tcp:[port] // port 为所占用的端口,如:8086 找到进程的 PID,使用 kil...

    CodeSheep 评论0 收藏0
  • Compass创建者Chris Eppstein:真正的CSS框架是如何工作的

    摘要:当我的补丁被拒绝了之后,我想要指出一个方向真正的框架是如何工作的。发起这项捐助有我的个人原因在里面,我的父亲在年被确诊为患有一种罕见的成年人形式的线粒体疾病。正是一个经历了如此过程的产品。 非商业转载请注明作译者、出处,并保留本文的原始链接:http://www.ituring.com.cn/article/120792 Chris Eppstein,Compass框架的创建...

    BigTomato 评论0 收藏0
  • 前端利器:SASS基础与Compass入门

    摘要:在吸取了的一些特性基础上,有了大幅改进,也就是现在的。嵌套极大程度上降低了选择器名称和属性的重复书写。选择器嵌套选择器嵌套是指从一个选择器中嵌套子选择器,来实现选择器的继承关系。也已经成为的一个标配组件。 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门...

    娣辩孩 评论0 收藏0
  • 使用compass自动合并css雪碧图(css sprite)

    摘要:使用雪碧图,能够减少页面的请求数降低图片占用的字节,以此来达到提升页面访问速度的目的。也正是因为这一点,导致很多开发者懒于使用雪碧图。本文就介绍下怎样使用来自动合并雪碧图。生成的每个雪碧图默认的规则是目录名图片名。 css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能够减少页面的请求数、降低图片占用的字节,以此来达到提升页面访问速度的目的。但...

    刘永祥 评论0 收藏0
  • 前端入门23-CSS预处理器(Less&Sass

    摘要:声明声明本篇内容梳理自以下几个来源网站的文档中文网感谢大佬们的分享。这个时候,预处理器就出现了,其实应该是说和这类语言出现了。声明 本篇内容梳理自以下几个来源: Github:smyhvae/web Bootstrap网站的 less 文档 Sass中文网 感谢大佬们的分享。 正文-CSS预处理(less&Sass) CSS预处理 什么是 CSS 预处理?为什么要有 CSS 预处理? 这...

    freecode 评论0 收藏0

发表评论

0条评论

boredream

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<