简单的sass基础语法

css预处理器sass的基础语法

sass的导入 

关键字:@import

可以将其他写好的sass样式文件导入到现有的sass文件中使用,我们可以定义多个sass文件模块,然后可以按需引入模块,被定义为模块的文件最好加_下划线以示区分,

如要导入_header.scss文件,可以直接写@import 'header'即可;在引入css样式文件的时候,只需要引入一个主要的css文件即可;

sass的变量定义

我们可以利用定义变量的方式来重复利用css中可能重复出现的样式

关键字:$+变量名:样式; 如:$background-color:#eeeeee;

定义好变量之后就可以在要使用该样式的地方使用变量来取代样式了,如:background-color:$background-color;

sass中的嵌套

sass中我们可以直接在样式里面直接嵌套样式,既可以让我们的代码更加直观也能减少许多重复的样式代码,写完sass代码后会自动将其编译为标准的css代码

如:

.header{

   padding:20px;

  .title{

  float:left;

  h2{

  margin:0;

  }

 }

}

sass中的混入

sass中的混入类似js中的函数

关键字定义:@mixin 函数名称(参数){函数体写样式};

如:@mixin transform($property){

  transform:$property

}

在要使用该样式的地方引入即可,引入的关键字:@include 如:@include transform(rotate(-10deg));

sass中的继承

关键字:% 类似面向对象中的概念

如:

%subtitle-font-size{

   font-size:16px;

}

在要使用的地方写入:@extend %subtitle-font-size;

就可以在使用的地方添加父类中的样式了;

猜你喜欢

转载自www.cnblogs.com/kai-yi/p/12046356.html
今日推荐