sass样式预处理

最新推荐文章于 2024-07-07 15:38:48 发布

转载最新推荐文章于 2024-07-07 15:38:48 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/aisiqi-love/p/10533126.html

本文详细介绍了SCSS中的混合器与变量的使用方法，包括背景图片设置、边框半径、全屏定位等实用技巧，同时展示了如何通过混合器简化CSS编写，提高代码复用率。

$blue: #1e82d0;

$bc: #e4e4e4;

$fc:#fff;

// 背景图片地址和大小

@mixin bis($url) {

background-image: url($url);

background-repeat: no-repeat;

background-size: 100% 100%;

}

@mixin borderRadius($radius) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

-ms-border-radius: $radius;

-o-border-radius: $radius;

border-radius: $radius;

}

//定位全屏

@mixin allcover{

position:absolute;

top:0;

right:0;

}

//定位上下左右居中

@mixin center {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

//定位上下居中

@mixin ct {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

//定位左右居中

@mixin cl {

position: absolute;

left: 50%;

transform: translateX(-50%);

}

//宽高

@mixin wh($width, $height){

width: $width;

height: $height;

}

//字体大小、行高、字体

@mixin font($size, $line-height, $family: 'Microsoft YaHei') {

font: #{$size}/#{$line-height} $family;

}

//字体大小，颜色

@mixin sc($size, $color){

font-size: $size;

color: $color;

}

//flex 布局和子元素对其方式

@mixin fj($type: space-between){

display: flex;

justify-content: $type;

}

$baseFontSize: 75;//默认基准font-size

@mixin px2rem($name, $px){

#{$name}: $px / $baseFontSize * 1rem;

}

1.变量

$bg-color: red;

.div { color: $bg-color }

2.嵌套

.content {

　　a {

　　}

3.混合器

@mixin

@mixin px2rem($name, $px){

#{$name}: $px / $baseFontSize * 1rem;

}

4.继承

@extend

//通过选择器继承继承样式

.error { border: 1px solid red; background-color: #fdd; }

.seriousError { @extend .error; border-width: 3px; }

转载于:https://www.cnblogs.com/aisiqi-love/p/10533126.html