sass实战演练03 - 响应式处理(1):变量模板、mixin实战用法

css3的@media属性

@media mediatype and|not|only(media feature){

//…

}

举个栗子：

@media screen and (max-width:480px){

h1{color:red;}

}

当屏幕宽度小于480px的时候生效

换成sass写法

这里我们要借助@mixin

首先我们要定义不同的屏幕尺寸（使用变量）

xs:′screenand(max−width:480px)′;//手机屏幕sm:’screen and (max-width:750px)’; //pad屏幕

md:′screenand(max−width:970px)′;//中等屏幕lg:’screen and (max-width:1170px)’; //大屏幕

1.在vars.scss文件中定义好变量:

$blue-font:#1b85ff;

$gray-border:solid 1px gray;

/*字体大小和文字颜色*/
$title-font-size:48px;
$title-font-color:#666;

$xs:'screen and (max-width:480px)';    //手机屏幕
$sm:'screen and (max-width:750px)';    //pad屏幕
$md:'screen and (max-width:970px)';    //中等屏幕
$lg:'screen and (max-width:1170px)'; //大屏幕

2.写@mixin

我们项目中是单独的mixin.scss文件：

@mixin media-xs(){
$title-font-color:red;
$title-font-size:36px;  //重新设置了变量的值,这个值修改不能写到@media里面
@media #{$xs} {
h1:first-child{ //大标题
color: $title-font-color;
font-size: $title-font-size;
};
}
}

3.index.css中使用

@include  media-xs;

4.最后用gulp编译的文件index.css:

@charset "UTF-8";
* {
margin: 0;
padding: 0;
font-size: 14px; }

/*字体大小和文字颜色*/
.container div {
text-align: center; }
.container div h1 {
font-size: 24px;
color: #999999; }
.container div h1:first-child {
color: #666;
font-size: 48px; }
@media screen and (max-width: 480px) {
.container div h1:first-child {
color: red;
font-size: 36px; } }

.container .searchdiv input {
height: 40px;
width: 60%;
border: solid 1px gray; }

.container .searchdiv button {
height: 40px;
width: 60px;
border: solid 1px gray; }

预览效果：

屏幕宽度小于 480px，大标题字体为36，颜色为红色