sass一些好用的东西

最新推荐文章于 2024-10-18 00:00:00 发布

weixin_34258838

最新推荐文章于 2024-10-18 00:00:00 发布

阅读量132

点赞数

文章标签： python ui

原文链接：https://my.oschina.net/xiaoweibaer/blog/782396

版权

2019独角兽企业重金招聘Python工程师标准>>>

使用sass快一年了，来记录一下它好用的东西吧 ##1.代码的宏观模块管理很方便的把不同功能的代码放在不同的文件中，然后在main.scss中@import引入；

注意：sass的@import并不同于css的@import。css每次@import都会发送一个新的http请求，请求一个css文件。但是sass是将所有的scss文件融合编译为一个css文件，实际使用的就是那个融合编译后的文件，并不关系你内部@import多少个文件。

拿我现在的项目目录举个例子：

输入图片说明

我会在main.scss中@import其他部分，但是我只需要在我的html文件中引入main.css这一个文件就好。

@charset "utf-8";
/** SASS的语法参见sass-lang.com */
@import "variables";//存放各个变量
@import "mixins";//各种可服用的mixin，比如box-sizing的兼容写法
@import "reset";//重置掉浏览器的自定义样式
@import "common";//通用的原子组件，比如：button
@import "component";//通用的组合组件，比如：输入验证码表单
@import "module";//每个页面下面的自定义样式
@import "themes";//主题样式，因为我们有的项目要嵌入不同银行的app中，为了保证和他行的app风格一致，我们需要在这里切换不同的主题样式
@import "iconfont";//图标字体
@import "layout";//用来放媒体查询的rem基准

你使用“_”开始的命名方式，sass就不会将这个scss文件编译成css文件，在引用的时候，可以不包含下划线。 ##2.变量使用变量之后，当设计师修改样式或者我们想编写一个ui库的时候，我们可以从容应对。同样举个例子就明白啦

// Colors
$color-normal:													#445c95 !default;//项目主题色，应用于主要信息、标题等
$color-secondary:												#888f9b !default;//项目说明文字颜色
$color-description:												#acb2c1 !default;//项目次要信息颜色

我们在定义文本颜色的时候就可以使用上面的三个变量，当项目更换导致整体颜色风格更改时，我们只需要改这三个变量，无需去更改每个定义文本颜色的地方。

变量还有一个很重要的用途，在混合宏中用来传递参数。下面就会讲到混合宏。

##3.混合宏可以在整个样式表中重复使用的样式，可以将这些样式定义为混合宏，主要用来各种兼容写法。举几个例子就明白了。

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

我们的定义了一个混合宏border-radius，里面写了各个浏览器的兼容。假设我们现在有个元素需要设置圆角，我们可以通过@include使用。

.box{
    @include border-radius(50px);
}

最终编译产生的css文件就是这样的

.box {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px; }

除了兼容写法，还可以将常用的代码片段定义为混合宏，比如定义按钮的样式

@mixin btn-style($color-btn) {
    background-color: $color-btn;
    color: #ffffff;
    border: none;
    &:active,&:hover{
        background-color: darken($color-btn,5%);
    }
    &:disabled{
        background-color: $color-btn-disabled;
        cursor: not-allowed;
    }
}

混合宏还支持不定参数传递,参数后面跟着省略号，表明可以还可以传递多个参数，参数个数不定量。

@mixin animation($animation...) {
    -webkit-animation: $animation;
    -moz-animation: $animation;
    animation: $animation;

使用时：

.plane{
    @include animation(flash 1s .3s infinite linear);
}

##4.%foo ‘%’就像‘.’、‘#’选择器一样，可以当做一种选择器使用。不同的时，定义在%foo下的样式，如果不通过@extend引用，就不会生效。举个例子：

%retina-border-top{
    &:before{
        @include retina-border(1,1px,0,0,0);
    }
    @media (-webkit-min-device-pixel-ratio: 2){
        &:before{
            @include retina-border(2,1px,0,0,0);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 3){
        &:before{
            @include retina-border(3,1px,0,0,0);
        }
    }
}

这是实现在retina屏下真正‘1px’边框的代码，当我们在使用时是这样的：

.box{
    @extend retina-border-top；
}

它比起@mixin的优势是，它生成的css更智能。智能在于，它会将通过@extend调用它的元素组合起来声明。 但是如果需要传递参数，我们还是使用@mixin比较好。 ##5.嵌套使用常规的CSS，每个元素在自己的“声明块”中独立变化，而通过Sass，可以在嵌套的块里将相关的元素组合在一起。无需通过后代选择器一层层嵌套，直接大括号写就好了。真的非常方便，谁用谁知道。还是举个例子：用css写是这样的：

.parent {
  width: 300px; 
}
.parent .child1 {
    width: 100%; 
    }
.parent .child1 .child1 {
      width: 60%; }
.parent .child2 {
    width: 30%; 
    }

用sass是这样的

.parent{
    width:300px;
    .child1{
        width: 100%;
        .child1{
            width: 60%;
        }
    }
    .child2{
        width: 30%;
    }
}

转载于:https://my.oschina.net/xiaoweibaer/blog/782396