首先回顾下css3中的@media

  定义和使用:

  使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

  @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

  当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

  实例:如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}

  @media功能在scss和在css中基本一样,只是增强了一下。

  scss允许@media在css规则中进行嵌套,如果@media嵌套在CSS规则内,编译时,@media将被编译到文件的最外层,包含嵌套的父选择器,scss代码实例如下:

.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}

  编译成css代码如下:

.sidebar {
width: 300px;
}
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
} 

  @media的queries允许互相嵌套使用,编译时,scss自动添加and。

  代码实例如下:

@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}

  编译后的css代码如下:

@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}

  @media当然也可以使用scss中的变量、运算符以及函数,代码实例如下:

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5; @media #{$media} and ($feature: $value) {
.sidebar {
width: 500px;
}
}

  被编译后的css代码如下:

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
.sidebar {
width: 500px;
}
}

scss-@media的更多相关文章

  1. gulp + webpack + sass 学习

    笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...

  2. LESSCSS的几点摘要

    字符串插值 变量可以用像 @{name} 这样的结构,以类似 ruby 和 php 的方式嵌入到字符串中: @base-url: "http://assets.fnord.com" ...

  3. LESS详解之编译LESS

      掌握LESS,必须先掌握LESS的编译.因为LESS是CSS预处理语言的一种,是一种动态语言.LESS可以运行在各种语言和环境中,包括浏览器端.服务器端等.就因为是一种CSS预处理语言,所以需要编 ...

  4. 前端网页打印插件print.js(可导出pdf)

    在前端开发中,想打印当前网页的指定区域内容,或将网页导出为多页的PDF,可以借助print.js实现,该插件轻量.简单.手动引入.不依赖其他库.示范项目github:https://github.co ...

  5. 4-10 辅助方法controll_name,;SanitizeHelper; 伪元素和scss中的&, @Media; cache介绍。

    回顾知识点 1. 在application.html.erb中: <main class="<%= controller.controller_name%>"&g ...

  6. 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范

    CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...

  7. CSS预处理器Sass(Scss)、Less、Stylus

    CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...

  8. scss 学习笔记

    由于没有办法在网络上找到适合顾客的模板,同时之前自己写css也没有很好的管理方式,最终选择了scss. Nested #main p { color: #00ff00; width: 97%; .re ...

  9. 【已解决】React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...

  10. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

随机推荐

  1. [JSOI2009]计数问题 二维树状数组BZOJ 1452

    题目描述 一个n*m的方格,初始时每个格子有一个整数权值.接下来每次有2种操作: 改变一个格子的权值: 求一个子矩阵中某种特定权值出现的个数. 输入输出格式 输入格式: 第一行有两个数N,M. 接下来 ...

  2. js中自己实现bind函数的方式

    最近由于工作比较忙,好久都没时间静下心来研究一些东西了.今天在研究 call 和 apply 的区别的时候,看到 github 上面的一篇文章,看完以后,感觉启发很大. 文章链接为 https://g ...

  3. c# post get

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. Python- sort()/sorted()

    Python list内置sort()方法用来排序,也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列. sorted(iterable,key=None,revers ...

  5. nodejs fs读取静态json文件

    let fs = require('fs'),stream = fs.createReadStream('./obd.json'),data = ""; stream.on('da ...

  6. 115th LeetCode Weekly Contest Check Completeness of a Binary Tree

    Given a binary tree, determine if it is a complete binary tree. Definition of a complete binary tree ...

  7. python内置函数一

    ⼀. 本节主要内容:1. 内置函数 什么是内置函数? 就是python给你提供的. 拿来直接⽤的函数, 比如print., input等等. 截⽌到python版本3.6.2 python⼀共提供了6 ...

  8. spring4.x hibernate4.x 整合 ehcache 注解 annotate

    [From] http://my.oschina.net/alexgaoyh/blog/348188

  9. 爬虫之re块解析

    一.re 这个去匹配比较麻烦,以后也比较少用,简单看一个案例就行 ''' 爬取数据流程: 1.指定url 2.发起请求 3.获取页面数据 4.数据解析 5.持久化存储 ''' import reque ...

  10. [jQuery] 在线引用地址

    百度静态资源公共库: http://libs.baidu.com/jquery/1.9.1/jquery.js jQuery网站: http://code.jquery.com/jquery-1.9. ...