频道澳门葡京手机版网址
登录注册
澳门葡京手机版网址 > 澳门葡京手机版网址 > web前端 > HTML/CSS > 正文
sass基础常识小结
2018-09-29 10:37:36           
收藏   我要投稿

sass小结

sass使用小结:

1、变量

变量必须以$开头,如果将变量使用到字符串中,需把变量名放到#{}大括号中。

$comW: 200px;
$comH: 200;
$comC: red;

#p1{
    width: $comW;
    height: #{$comH}px;  // 在字符串使用需要加上#{}
    background: $comC;
}

2、简单的运算

$comW: 200px;
$comH: 200;
$comC: red;

#p1{
    position: absolute;
    width: $comW;
    height: #{$comH}px;         // 在字符串使用需要加上#{}
    background: $comC;

    top: 10px + 150px;          // top: 150px - 10;
    
    // left: $comW + $comW;     // 或者 left: #{$comH + $comH}px
    // left : 100px + $comH;    // 或者 left: 100px + $comW
    left: $comH*2px;            // 或者 left: $comH*$comW

    margin: (14px/2);           // 使用除法需要用括号包裹起来
}

3、复用

(1)、@extend指令--继承(继承样式)

.a1{
    color: blue;
}

.a2{
    @extend .a1;
    font-size: 30px;
}


// 编译后
.a1, .a2 {
  color: blue;
}

.a2 {
  font-size: 30px;
}

(2)、@mixin指令--重用样式。可传参也可以不传

@mixin border-font($b, $f){
    border: $b + px  solid red;
    font-size: $f + px;
  }
  
.a3{
    @include border-font(2, 13);   // 这里需要使用到include指令
}

// 编译后
.a3 {
  border: 2px solid red;
  font-size: 13px;
}

以上两个指令都实现了样式代码的复用。区别在于,@extend指令引入的是一段相对固定的代码;而@mixin指令引入的样式代码可以通过参数来改变,灵活性更好。

4、@import指令

一般都是使用来引入文件。多是在一个scss样式文件中引入另个样式文件? ?@import 'base'? 或者? @import 'base.scss'

?

5、@if--@else if--@else指令。条件语句

@mixin bgcolor($d){
    @if( $d == 1 ){
        background-color: red;
    } @else if( $d == 2 ){
        background-color: green;
    } @else{
        background-color: blue;
    }
}

.a4{
    width: 200px;
    height: 200px;
    @include bgcolor( 5 );
}


// 编译后
.a4 {
  width: 200px;
  height: 200px;
  background-color: blue;
}

6、循环语句

(1)、@for指令

@for $i from 1 to 5{   // 从1到4,不包括5
    .b#{$i}{
        background-image: url(/kf/201809/&);
    }
}

// 编译后
.b1 {
  background-image: url(/kf/201809/"../images/1.png");
}

.b2 {
  background-image: url(/kf/201809/"../images/2.png");
}

.b3 {
  background-image: url(/kf/201809/"../images/3.png");
}

.b4 {
  background-image: url(/kf/201809/"../images/4.png");
}

(2)、 @while

$j : 1;

@while $j < 5{
    .c#{$j}{
        background-image: url(/kf/201809/&);
    }

    $j : $j + 1;
}

// 编译后
.c1 {
  background-image: url(/kf/201809/"../images/1.png");
}

.c2 {
  background-image: url(/kf/201809/"../images/2.png");
}

.c3 {
  background-image: url(/kf/201809/"../images/3.png");
}

.c4 {
  background-image: url(/kf/201809/"../images/4.png");
}

?

(3)、@each指令

@each $k in 1,2,3,4{
    .d#{$k}{
        background-image: url(/kf/201809/&);
    }
}

// 编译后
.d1 {
  background-image: url(/kf/201809/"../images/1.png");
}

.d2 {
  background-image: url(/kf/201809/"../images/2.png");
}

.d3 {
  background-image: url(/kf/201809/"../images/3.png");
}

.d4 {
  background-image: url(/kf/201809/"../images/4.png");
}

7、@function指令---函数? (每个函数都需要有返回值内容)

@function colorRgba($r, $g, $b, $a){
    @return rgba($r, $g, $b, $a);
}

.e{
    background-color: colorRgba(0,0,0,0.2);
}

// 编译后
.e {
  background-color: rgba(0, 0, 0, 0.2);
}

以上是使用sass过程中的一些小结。对于sass的理解是,使用编程,类似于写js的形式去写css。主要是避免重复地写相同相似的样式代码,提高写css的效率。

点击复制链接 与好友分享!回澳门葡京手机版网址澳门葡京手机版网址
上一篇:如何利用node.js进行webapp的开发实例教程
下一篇:Underscore.js新手入门基础
相关文章
图文推荐
点击排行

关于大家 | 联系大家 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 澳门葡京手机版网址_澳门新莆京娱乐_www.88807.com - 点此进入--致力于做实用的IT技术学习网站

XML 地图 | Sitemap 地图