scss基础和css扩展-易微帮

变量

定义变量

//app.scss
$allpadding:20px; //声明颜色变量 $color

//使用
@import '@/assets/app.scss';
  .container{
    width: 100%;
    padding:$allpadding;
  }

⚠️scss中，中下划线和下划线是同一个东西

$link-color: blue;
a {
  color: $link_color;
}
 
//编译后
 
a {
  color: blue;
}

计算

变量可进行加减乘除：http://t.csdnimg.cn/duYU9

width: 100px + 100px + 100px; //加法
width: 100px - 100px + 100px; //减法
width: 100px * 100 //乘法,注scss的乘法和除法是带单位的
width: (100px/3)  //注意这里需要带括号,如果不带括号会当场分割数值
width: $width / 3 //也可以不带括号,但是里面计算的一定要有声明的变量,因为这个语法css不认识,那么就会被解析成SCSS
width: 100 % 3px //SCSS也支持取模运算

嵌套

基础嵌套

scss和css一样可以进行嵌套：

.container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .btn{
      margin: 10px;
    }
  }
编译结果
.container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
.container .btn{

      margin: 10px;
  }

父级选择器

.container{
  a {
    color: red;    
    &:a {
      color:blue;
    }
    &-left: {
      color:black;
    }
  }
}
编译结果
 
.container a {
  color: red;
}
.container a:hover {
  color: blue;
}
.container a-left {
  color: black;
}

属性嵌套

/* SCSS */
font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}
 
text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}
 
/* CSS */
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
 
text-align: center;
text-transform: lowercase;
text-overflow: hidden;

导入scss

@import '@/assets/app.scss';

继承

在scss中可以将一个样式继承于另一个样式，使用@extend


.aaaa {
  bakckground: red;
}

.sprite-1 {
  @extend .aaaa;
  background-position: 0 -30px;
}

.sprite-2 {
  @extend .aaaa;
  background-position: 0 -60px;
}

占位符

在scss继承时，你会发现，当.aaaa被继承编译后，你会发现它就没用，也就是说有没有一个办法使.aaaa不会出现在编译后的文件中，但它的功能不变，就出现了占位符


%aaaa {
  bakckground: red;
}

.sprite-1 {
  @extend %aaaa;
  background-position: 0 -30px;
}

.sprite-2 {
  @extend %aaaa;
  background-position: 0 -60px;
}

混合

在写css时，经常会有大量重复的代码，这时候混合就出现了。

定义混合

@mixin mixin-name {
  property: value;
}

使用混合

selector {
  @include mixin-name;
}

混合中也可以包含混合

@mixin mixin-name {
  @include mixin-name-one;
}

混合传参

定义默认值color=blue，width=1px

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}
p { @include bordered(blue,2px); }

函数

@if

（1）@if…（单向选择）；
（2）@if…@else…（双向选择）；
（3）@if…@else if…（多向选择）；

 $num1: 8;
 .content {
     @if $num1 >= 20 { 
         width: 150px; color:red 
     } @else if $num1 <= 10{   /* 此样式块会被使用*/
         width: 200px; color:blue
     } @else { 
         width: 350px; color:green 
     }
 }

@for

方式1：@for $i from 开始值 through 结束值

方式2：@for $i from 开始值 to 结束值

 /* SCSS */
 @for $i from 1 through 5 {
      .banner-#{$i} {
         background-image: url(/images/banner-#{$i}.png);
     }
 }
 
 /* CSS 编译后 */
 .banner-1 {
   background-image: url(/images/banner-1.png); }
 
 .banner-2 {
   background-image: url(/images/banner-2.png); }
 
 .banner-3 {
   background-image: url(/images/banner-3.png); }
 
 .banner-4 {
   background-image: url(/images/banner-4.png); }
 
 .banner-5 {
   background-image: url(/images/banner-5.png); }

@each

方法：@each $var in 列表值

{

……

}

 /* SCSS */
 @each $pic in about, news, project,contact {
   category-pic .#{$pic} {
   background-image: url(/images/pic/#{$pic}.png); }
 }
 
 /* CSS 编译后 */
 category-pic .about {
   background-image: url(/images/pic/about.png); }
 
 category-pic .news {
   background-image: url(/images/pic/news.png); }
 
 category-pic .project {
   background-image: url(/images/pic/project.png); }
 
 category-pic .contact {
   background-image: url(/images/pic/contact.png); }

@while

 /* SCSS */
 $i: 6;
 @while $i > 0 {
   .item-#{$i} { width: 2em * $i; }
   $i: $i - 2;
 }
 /* CSS 编译后 */
 .item-6 {
     width: 12em;
 }
 .item-4 {
     width: 8em;
 }
 .item-2 {
     width: 4em;
 }

扩展

justify-content

justify-content 是 SCSS 中的一个属性，用于控制flex容器内元素在主轴方向上的对齐方式。它可以取以下值：

flex-start：flex容器内的元素从左到右排列，即左边对齐。
flex-end：flex容器内的元素从右到左排列，即右边对齐。
center：flex容器内的元素居中，即容器中心对齐。
space-between：flex容器内的元素在主轴方向上平均分布，即两端对齐。
space-around：flex容器内的元素在主轴方向上平均分布，并在两端保持相同的外边距，即around对齐。
stretch（默认值）：flex容器内的元素会尽可能地扩展，以填充整个容器。

例子：设置内部元素横向自动排布换行：

将容器设置为 flex 布局。
允许容器内的子元素换行。如果子元素数量超过容器宽度，它们将自动换行。
将子元素平均分布在整个容器中，并在左右两边保持一定的外边距。

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;//使子元素平均分布在一行上

scss基础和css扩展

变量