移步web开拓之rem响应式设计韦德娱乐1946网页版

2019-05-03 22:29 来源:未知

我是使用sass来写css的,具体如下:

预处理

css本身是很有用的,但样式表正在变得越来越庞大、复杂以至于难以维护。预处理可以解决这个问题。sass可以让你使用一些css本身没有的东西,比如变量、嵌套、混合、继承和一些其他特别的特性,让使用css变得更加得心应手。

1、variable.scss

变量

试想一下在样式表中可以重复使用变量。你可以在样式表中用变量存储一些例如:颜色、字体栈、或者其他css值,然后重复使用他们。sass用$符号来设置一个变量,例子如下:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

当运行sass之后,sass会把我们定义的变量放置到css样式表的指定地方。这个是非常强大的,当我们希望我们定义的颜色在整个网站保持一致性的时候。

在variable.scss文件中定义一个 变量$base_fontSize来设置基本字体大小(我使用的是百分比,即根据浏览器字体默认值再乘以这个百分比)。

嵌套

当你写html的时候,你会发现它有清晰的嵌套和视觉的层次。而css则没有。sass会让你嵌套你的css选择器就像是用html嵌套的视觉层次一样。请注意,过多的嵌套规则将会有过多的css,从而导致代码难以维护,这通常是一个不好的做法。
考虑到这一点,这里有个关于一些经典样式的网站导航案例:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

你会发现css的ul、li、a选择器嵌套在了nav选择器里面。这样组织你的css代码会变得更加可读,而编译后生成的css代码如下:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
//font-size
$base_fontSize:62.5%;

局部

你可以创建一个包含css小片段的sass文件,然后再其他sass文件中引入这个sass文件。这会让你模块化你的css代码而且会让代码越来越容易维护。片段sass文件通常以下划线开头命名,如命名为:_partial.scss。这样的命名方式会让sass知道它是一个片段sass文件,不会编译后生成一个css文件。引入这样的sass片段文件可以用指令@import。

2、base.scss

Import

css有个引入选项,可以把你的css代码分割成更小、更容易维护的部分。唯一的缺点就是每次你引入一个文件,就需要一次http请求。而sass文件顶端的@import引入文件不需要再一次的http请求。sass将会把在sass文件中需要引入的文件和本文件整合在一起,然后只会发送一个整合后的css文件到服务器,这样就会减少http的请求次数。

现在,我们有两个sass文件, _reset.scss 和 base.scss。我们将在base.scss文件中引入_reset.scss文件。

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

注意,在base.scss中我们用了@import 'reset';来引入文件。sass是很聪明的,它会自动知道这个是sass文件,从而就不需要给引入的文件加scss文件后缀了,编译后的css文件如下:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

在base.scss中引入上面那个变量文件(sass语法请自行百度),然后设置html字体的初始值为$base_fontSize,接下来通过媒体查询根据移动设备屏幕大小对变$base_fontSize重新赋值,并对html字体大小重新赋值为1rem。这样就能很好的兼容超小手机至pad的所有屏幕。当然,每次对$base_fontSize进行重新赋值的百分比可以自己根据需要而定。

混合器

css中的一些写法写起来是有点乏味的,尤其是css3中存在的一些前缀。混合器mixin能让你创建一个css申明组,可以在整个网站中重复使用。你甚至可以传递参数让你的混合器更加灵活。混合器最好的一个应用就是添加浏览器的前缀,如下面border-radius例子:

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

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

创建一个混合器,首先要通过@mixin ,然后给他一个名字,如:border-radius。也可以传递参数$radius,像这样border-radius($radius),创建mixin完成后,就可以使用@include加混合器名字来使用混合器。编译后的css代码如下:

.box {
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
        -ms-border-radius: 10px;
            border-radius: 10px;
}
@import 'variable.scss';

html {
    font-size: $base_fontSize;
}
@media only screen and (min-width: 481px){
    $base_fontSize:$base_fontSize*94%;
    html {
        font-size: 1rem!important;
    }
}
@media only screen and (min-width: 561px){
    $base_fontSize:$base_fontSize*109%;
    html {
        font-size: 1rem!important;
    }
}
@media only screen and (min-width: 641px){
    $base_fontSize:$base_fontSize*125%;
    html {
        font-size: 1rem!important;
    }
}

继承

继承是sass中最实用的特性之一。使用@extend指令可以让我们从一个选择器到另一个选择器来共享一段css属性。它可以让你的sass文件变得非常的干练。下面的例子我们将会创建一系类的信息关于错误的、警告的和成功的。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

上面的例子中,你可以修改.message 属性,修改的效果最终会应用到.success、.error、.warning中。
生成的css代码神奇的发生了改变,它避免了你要写多个类来达到同样的效果。编译后的css代码:

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

3、在html页里引用base.scss生成的base.css文件即可

运算符

在css中做数学运算是很有用的,sass有少许标准的数学运算符,如 、-、*、/、和 %。下面的例子我们将做一些简单的数学运算来计算aside和article的宽度。

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

我们创建了一个简单的基于960px的流式网格,sass中的运算符可以毫无障碍的把像素值转换为百分比。编译后的css代码如下:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

 

TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:移步web开拓之rem响应式设计韦德娱乐1946网页版