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

关注

原创最新推荐文章于 2026-10-13 13:37:22 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

深入前端领域，解析Sass的多列布局实现方法本文旨在帮助前端开发者理解并掌握使用Sass实现多列布局的各种技术和方法。我们将覆盖从基础到进阶的内容，包括变量、Mixin、函数等Sass特性的应用，以及如何构建响应式的网格系统。文章将从Sass基础开始，逐步深入到多列布局的实现原理和具体方法，最后通过实际案例展示如何应用这些技术。Sass：一种CSS预处理器，扩展了CSS的功能，增加了变量、嵌套规则、Mixin等特性多列布局：将页面内容划分为多个垂直列的布局方式网格系统：用于创建页面布局的结构化框架Sass。阅读详情

css3的@media属性
@media mediatype and|not|only(media feature){
//…
}

举个栗子：
@media screen and (max-width:480px){
h1{color:red;}
}
当屏幕宽度小于480px的时候生效

换成sass写法
这里我们要借助@mixin
首先我们要定义不同的屏幕尺寸（使用变量）
$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)’; //大屏幕

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; }