本教程通过CSS建立一个简单的响应式网格系统，并利用Sass进行改进，介绍Sass的核心功能，如变量、混合、扩展和循环。通过设置Sass，定义变量，创建混合，使用媒体查询和循环，实现灵活的响应式布局，适用于不同数量的列。
sass 响应式
在本教程中，我们将使用CSS构建一个简单的响应式网格系统。 一旦我们熟悉了它的工作原理，我们将通过Sass对其进行改进，并在此过程中学习一些Sass的核心功能。
CSS入门
让我们快速检查一下网格系统的外观。 有一些更聪明的构建网格的方法，这些方法对所需标记的干预较少，但是此网格为我们提供了一个练习简单但有用的Sass技术的绝好机会。 它使用一个包装元素，然后使用其中的其他元素作为行，然后使用更多的元素作为我们的列。
Grid.css
首先，我们只需要一个CSS文件，因此在代码编辑器中打开一个新文档，并将其命名为“ grid.css”。
我们要添加的第一件事是全局重置和框大小调整规则。 这将确保在元素的计算尺寸内添加应用于元素的填充，从而为我们提供了更大的自由来定义列宽。
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}接下来，我们将添加一条规则，以确保所使用的所有图像行为流畅。
img {
width: auto;
max-width: 100%;
height: auto !important;
}包装器
现在，有一些规则可以确保我们的包装器元素表现良好。
.wrapper {
width: 100%;
margin: 0 auto;
}注意：请记住，我们首先使用移动设备。 我们的容器以100％的视口宽度开始，但是我们将其更改为更大的屏幕。
行
我们所有的row元素所做的就是包含列，并确保各组列正确地相互清除。 让我们向包装器和行元素添加一些通用的.clearfix规则。
.wrapper:after,
.row:after {
content: "";
display: table;
clear: both;
} 注意：我们不必将这些元素.wrapper ， .row和.column ，我们可以比这些元素更具创造性。 就本教程而言，这些名称非常清楚。
列
根据每个列的大小，我们将有一系列的列类（例如.column-1和.column-6 。让我们使用属性选择器一次性定位和设置所有这些列的样式。
[class*='column-'] {
float: left;
padding: 1em;
width: 100%;
min-height: 1px;
} 这个选择器说； 接受其类包含字符串column-任何元素，并应用以下样式。 因此，我们所有的列元素都将向左浮动，填充为1em （这将形成我们的装订线和一些垂直空间），并将填充100％的视口宽度（同样，我们首先在此处移动）。 最后， min-height: 1px确保该列正确显示，即使其中没有内容。
信不信由你，我们现在有一个网格！ 以下标记是我们所需要的。
<section class="wrapper">
<div class="row">
<div class="column-3"></div>
<div class="column-3"></div>
<div class="column-6"></div>
</div>
</section>我们可以使用行中列的任意组合， 看一下演示以了解当前应该拥有的内容。
响应Swift
这是我们要处理的移动视图，现在让我们添加一个媒体查询，为大屏幕提供不同的布局。 您需要为自己的网格确定断点，但是我们将使用30em任意断点。
@media only screen and (min-width: 30em) {
}我们在此媒体查询中放置的任何样式都将在30em及以上的屏幕上生效。 我们将使用这一点将列拆分为正确的宽度。
宽度百分比
每列应有多宽？ 这取决于我们有多少列。 在本演示中，我将使用十二列，因此每一列都应该恰好是包装的十二分之一（1/12）。 对于跨越两个宽度的列，它将是十二分之二 ，依此类推。 这就是给我们的：
@media only screen and (min-width: 30em) {
.wrapper {
width: 95%;
max-width: 65em;
}
.column-1 {
width: 8.33333%;
}
.column-2 {
width: 16.66667%;
}
.column-3 {
width: 25%;
}
.column-4 {
width: 33.33333%;
}
.column-5 {
width: 41.66667%;
}
.column-6 {
width: 50%;
}
.column-7 {
width: 58.33333%;
}
.column-8 {
width: 66.66667%;
}
.column-9 {
width: 75%;
}
.column-10 {
width: 83.33333%;
}
.column-11 {
width: 91.66667%;
}
.column-12 {
width: 100%;
}
} 您还将看到，我们使.wrapper元素小于屏幕的整个宽度，并为其指定了max-width 。 看看对我们的网格做了什么。
用Sass清理东西
我们CSS网格可以工作，但是如果我们实际上希望网格中有16列，会发生什么情况？ 甚至更多？ 我们必须重新计算每一列，并每次都在我们CSS文件中手动输入。 更不用说我们CSS会越来越长，越来越难以管理。 令人高兴的是，Sass（或任何其他预处理器）可以为我们提供帮助。
设置Sass
本教程不是关于设置Sass的，它假设您已经知道如何做。 如果不是这种情况，并且您需要启动并运行，请看一下Mastering Sass：第1课 ，或者SASS and Compass for Web Designers：Introduction 。
完成Sass项目设置后，请继续进行下一步。
定义变量
Sass将以各种方式帮助我们清理CSS，但是我们可以做的第一件事是提取任何有用的值并将它们存储在变量中。 首先从一个名为“ _variables.scss”的新部分开始； 一个Sass文件，该文件不会直接编译成CSS，但我们将在其他文件中引用。
// grid variables
$grid-columns: 12;
$grid-max-width: 65em;
// breakpoints
$breakpoint-small: "only screen and (min-width: 20em)";
$breakpoint-medium: "only screen and (min-width: 30em)";这些变量使我们可以处理的列数； 目前为12，但可以很容易地更改为16，也许是32（无论您想要什么）。 即使我们现在仅使用一个断点，我们也将一些断点存储为字符串。
我们将很快使用它们，但首先我们将设置一些混合。
混合蛋白
Sass mixins是一段代码，我们可以定义一次，然后在项目的其他地方重复使用。 例如，我们可以采用第一组规则，其中设置border-box并将其大部分提取到mixin中。 我们从开始：
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}然后，我们提取其中的一部分以供重用，定义一个mixin，我将其称为“边界框”，如下所示：
@mixin border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} 然后，我们@import我们的变量，并混入到主“grid.scss”，用混入有@include声明。
@import "variables";
@import "mixins";
*,
*:after,
*:before {
margin: 0;
padding: 0;
@include border-box;
}@extend Clearfix
正如SebastianEkström所建议的，我们可以使用clearfix规则来做类似的事情。 在这种情况下，我们采用Nicolas Gallagher推荐的clearfix规则，并使用占位符选择器 （ % ）将它们添加到我们的mixin文件中：
%clearfix {
*zoom: 1;
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}占位符选择器允许我们定义整个样式的块，只有在将它们扩展到其他地方时，它们才会输出，如下所示：
.wrapper,
.row {
@extend %clearfix;
}编译后，Sass的几行代码看起来像这样：
.wrapper,
.row {
*zoom: 1;
}
.wrapper:before,
.row:before,
.wrapper:after,
.row:after {
content: " ";
display: table;
}
.wrapper:after,
.row:after {
clear: both;
}使用我们的变量
让我们利用我们设置的一些变量，对吧？ 首先，我们可以换出包装器上的max-width值。 这个：
.wrapper {
width: 95%;
max-width: 65em;
}变成这个：
.wrapper {
width: 95%;
max-width: $grid-max-width;
}现在，让我们对媒体查询做同样的事情。 这个：
@media only screen and (min-width: 30em) { 将通过我们的$breakpoint-medium变量进行改进：
@media #{$breakpoint-medium} { 注意：您会看到我们将变量包装在#{} 。 这称为插值 。 通常，如果我们需要在另一个变量中输出变量，则可以这样做，但是在这种情况下，这是必须的，因为如果@media不直接跟在括号()后面，则Sass编译器会@media媒体查询。 您可以在Hugo Giraudel的有关Sass插值的所有信息中阅读更多内容。
要使用我们的最终变量$grid-columns ，我们需要使用更多的Sass功能。 循环。
无礼的循环
除了实际值外，我们的列宽定义都完全相同。 如果我们根据需要输出尽可能多的列，并且每次都更改值，则将更加简洁。 为此，我们可以使用Sass @for循环，如下所示：
@for $i from 1 through 12 {
// looped content
} 这将循环12次，每次$i的值将反映该循环。 我们可以这样输出$i ：
@for $i from 1 through 12 {
.column-#{$i} {
}
} 同样，您会注意到我们在$i周围使用#{}将值输出为字符串，并将其附加到.column-选择器。 在编译时，这为我们提供了以下内容：
.column-1 {
}
.column-2 {
}
.column-3 {
}
.column-4 {
}
.column-5 {
}
.column-6 {
}
.column-7 {
}
.column-8 {
}
.column-9 {
}
.column-10 {
}
.column-11 {
}
.column-12 {
}辉煌！ 现在，让我们使用一些计算在这些选择器中输出正确的样式。
无礼的运营商
我们做得不错，但是现在我们需要为每个选择器输出类似以下内容的内容：
.column-5 {
width: 41.66667%;
} 该列宽的计算方式为：100％除以列总数，再乘以列数。 在这种情况下， 100% / 12 * 5 = 41.66667% 。 因此，这就是我们需要应用的计算，将变量的相关值切换出来。
@for $i from 1 through 12 {
.column-#{$i} {
width: 100% / 12 * $i;
}
}Sass现在正在为我们执行计算，从而为我们提供以下内容：
.column-1 {
width: 8.33333%;
}
.column-2 {
width: 16.66667%;
}
.column-3 {
width: 25%;
}
.column-4 {
width: 33.33333%;
}
.column-5 {
width: 41.66667%;
}
.column-6 {
width: 50%;
}
.column-7 {
width: 58.33333%;
}
.column-8 {
width: 66.66667%;
}
.column-9 {
width: 75%;
}
.column-10 {
width: 83.33333%;
}
.column-11 {
width: 91.66667%;
}
.column-12 {
width: 100%;
} 最后整理一下，我们可以使用$grid-columns变量，而不是值12 ：
@for $i from 1 through $grid-columns {
.column-#{$i} {
width: 100% / $grid-columns * $i;
}
} 现在，如果要更改列数，只需更改变量，所有的计算都将为我们完成！ 例如，将$grid-columns更改$grid-columns 4可得到以下CSS：
@media only screen and (min-width: 30em) {
.wrapper {
width: 95%;
max-width: 65em; }
.column-1 {
width: 25%; }
.column-2 {
width: 50%; }
.column-3 {
width: 75%; }
.column-4 {
width: 100%; }
}结论
我们最终的grid.scss是仅42行代码； 比我们最初CSS要少。
在整个过程中，我们研究了Sass变量，mixin，占位符，扩展，循环，运算符，甚至插值。 这是一组非常强大的功能，如果您刚接触Sass，则是一个很好的开始。
您还能如何改善我们构建的网格 ？ 您还会添加什么甚至删除什么？ 让我们在评论中知道！
sass 响应式
扫一扫
4828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
