大讲台浅谈sass与compass特性及使用

2019-11-06 09:14:17

字体：大中小

来源：转载

供稿：网友

1、sass与compass特性　　sass是CSS扩展的语言，所以sass支持css语法，除此之外，sass还有支持定义变量变量、嵌套、继承等特性。　　Compass是基于Sass开发的框架，里面集成了很多功能，比如说css3前缀、合成sPRites等。　　sass文件最终要被编译成css文件才能引入到页面中

　　sass与compass结合使用，可以解决书写css时遇到的痛点，首先执行compasswatch来监听sass文件的变化，sass文件一旦有变化，compass会自动执行将sass文件编译成css文件。可以通过ctrl+c退出。

　　@import"compass/reset";

　　打开sass文件夹下面的screen.scss会看到@import"compass/reset";

　　在stylesheets/screen.css文件中会添加reset.css的样式

　　2、变量　　screen.scss代码　　$error-color:"red";　　.error{　　color:$error-color;　　font-size:14px;　　}　　.danger-error{　　color:$error-color;　　font-size:14px;　　font-weight:bold;　　}　　screen.css对应的代码　　.error{　　color:"red";　　font-size:14px;　　}　　.danger-error{　　color:"red";　　font-size:14px;　　font-weight:bold;　　}　　3、局部文件

　　我们在sass文件夹下新建_variable.scss，把$error-color:"red";放进去。

　　screen.scss代码　　@import"_variable";　　.error{　　color:$error-color;　　font-size:14px;　　}　　.danger-error{　　color:$error-color;　　font-size:14px;　　font-weight:bold;　　}　　screen.css对应的代码　　.error{　　color:"red";　　font-size:14px;　　}　　.danger-error{　　color:"red";　　font-size:14px;　　font-weight:bold;　　}　　4、嵌套　　嵌套有两种选择器嵌套，样式嵌套　　screen.scss代码　　.nav{　　height:50px;　　li{　　height:50px;　　font:{　　weight:bold;　　size:14px;　　}　　a{　　color:#000;　　&:hover{　　color:#ccc;　　};　　}　　}　　}　　screen.css对应的代码　　.nav{　　height:50px;　　}　　.navli{　　height:50px;　　font-weight:bold;　　font-size:14px;　　}　　.navlia{　　color:#000;　　}　　.navlia:hover{　　color:#ccc;　　}　　5、继承　　screen.scss代码　　.error{　　color:$error-color;　　font-size:14px;　　}　　.danger-error{　　@extend.error;　　font-weight:bold;　　}　　screen.css对应的代码　　.error,.danger-error{　　color:"red";　　font-size:14px;　　}　　.danger-error{　　font-weight:bold;　　}　　6、css3前缀　　我们需要引入compass提供的css3模块　　screen.scss代码　　@import"compass/css3";　　.rounded{　　@includeborder-radius(5px);　　}　　screen.css对应的代码　　.rounded{　　-moz-border-radius:5px;　　-webkit-border-radius:5px;　　border-radius:5px;　　}　　7、合成sprites　　首先ctrl+c退出compasswatch

　　在hello-sass-compass项目中新建images/icon,在icon文件夹下添加两张png图片

　　screen.scss代码　　@import"compass/utilities/sprites";　　@import"icon/*.png";　　@includeall-icon-sprites;

　　执行compasscompile，再次打开images文件夹发现，多了一张合并后的sprite。

　　screen.css也生成了对应的代码　　.icon-sprite,.icon-goTop2,.icon-gotop{　　background-image:url('/images/icon-s9edae6be74.png');　　background-repeat:no-repeat;　　}　　.icon-goTop2{　　background-position:00;　　}　　background-position:0-64px;　　}　　8、config.rb　　相对地址：从上面我们看到背景图片的url为绝对路径，很多时候我们需要设为相对路径，只需要把config.rb中的　　http_path="/"　　改成　　http_path="../"

　　然后重新执行一次compasscompile即可