首页 技术 正文
技术 2022年11月23日
0 收藏 507 点赞 2,172 浏览 1247 个字

001、安装sass

1、删除gem源:gem sources --remove https://rubygems.org/2、添加国内源:gem sources -a http://gems.ruby-china.org/3、打印是否替换成功:gem sources -l4、安装sass:gem install sassLinux和Mac已自带Ruby,不用再安装,mac同学安装:sudo gem install sass
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
 

002、sass的四种编译风格

nested:嵌套缩进的css代码,它是默认值。
【css预处理器】——sass的基本语法——【巷子】
expanded:没有缩进的、扩展的css代码。
【css预处理器】——sass的基本语法——【巷子】
compact:简洁格式的css代码。
【css预处理器】——sass的基本语法——【巷子】
compressed:压缩后的css代码。
【css预处理器】——sass的基本语法——【巷子】

003、编译sass

1、单个文件编译:sass 文件名:文件名2、编译整个文件夹:sass 文件夹名:文件夹名3、监听编译:sass --watch 文件名:文件名4、压缩加编译:sass --watch test.scss:test.css --style nested5、编译整个文件夹:sass sass/:css/

004、sass的基本语法

1、sass中定义变量用$

1、普通变量和默认变量    普通变量定义了后可在全局使用
   【css预处理器】——sass的基本语法——【巷子】
    默认变量仅需要在值后面加!default
【css预处理器】——sass的基本语法——【巷子】2、如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中3、局部变量只能在局部使用,全局变量可以在任何地方使用

2、嵌套

选择器嵌套:
ul{
li{
color:red;
&:hover a{
color:#000;
}
} } &:代表父级

3、混合宏

作用:可以重用代码块声明混合宏:@mixin调用混合宏:@include1、不带参数的混合宏

  @mixin border-radius{       -webkit-border-radius:5px;       border-radius:5px;  }   2、带参数的混合宏   @mixin border-radius($radius:5px){     -webkit-border-radius:$radius;     border-radius:$radius;  }  如果需要修改则在调用的时候直接修改即可 

4、继承

在sass中,通过继承可以减少重复的代码,让一个选择器继承另一个选择器的样式方法:@extend.alert{font-size:18px;}.alert a{
  text-align:center;
  &:hover{
    color:red;
  }
}div{@extend .alert}

5、@import

@import:引入其他文件例如:reset文件  公共文件的引入:命名规范是以下划线开头的,这样的 scss 文件不会被编译成 css_base.scss文件@import "base";

未完待续…….

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,048
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:4,905
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:5,737
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:5,593
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:6,806
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,235