scss-@media
首先回顾下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的更多相关文章
- gulp + webpack + sass 学习
笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...
- LESSCSS的几点摘要
字符串插值 变量可以用像 @{name} 这样的结构,以类似 ruby 和 php 的方式嵌入到字符串中: @base-url: "http://assets.fnord.com" ...
- LESS详解之编译LESS
掌握LESS,必须先掌握LESS的编译.因为LESS是CSS预处理语言的一种,是一种动态语言.LESS可以运行在各种语言和环境中,包括浏览器端.服务器端等.就因为是一种CSS预处理语言,所以需要编 ...
- 前端网页打印插件print.js(可导出pdf)
在前端开发中,想打印当前网页的指定区域内容,或将网页导出为多页的PDF,可以借助print.js实现,该插件轻量.简单.手动引入.不依赖其他库.示范项目github:https://github.co ...
- 4-10 辅助方法controll_name,;SanitizeHelper; 伪元素和scss中的&, @Media; cache介绍。
回顾知识点 1. 在application.html.erb中: <main class="<%= controller.controller_name%>"&g ...
- 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范
CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...
- CSS预处理器Sass(Scss)、Less、Stylus
CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...
- scss 学习笔记
由于没有办法在网络上找到适合顾客的模板,同时之前自己写css也没有很好的管理方式,最终选择了scss. Nested #main p { color: #00ff00; width: 97%; .re ...
- 【已解决】React中配置Sass引入.scss文件无效
React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...
- css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
随机推荐
- [JSOI2009]计数问题 二维树状数组BZOJ 1452
题目描述 一个n*m的方格,初始时每个格子有一个整数权值.接下来每次有2种操作: 改变一个格子的权值: 求一个子矩阵中某种特定权值出现的个数. 输入输出格式 输入格式: 第一行有两个数N,M. 接下来 ...
- js中自己实现bind函数的方式
最近由于工作比较忙,好久都没时间静下心来研究一些东西了.今天在研究 call 和 apply 的区别的时候,看到 github 上面的一篇文章,看完以后,感觉启发很大. 文章链接为 https://g ...
- c# post get
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Python- sort()/sorted()
Python list内置sort()方法用来排序,也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列. sorted(iterable,key=None,revers ...
- nodejs fs读取静态json文件
let fs = require('fs'),stream = fs.createReadStream('./obd.json'),data = ""; stream.on('da ...
- 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 ...
- python内置函数一
⼀. 本节主要内容:1. 内置函数 什么是内置函数? 就是python给你提供的. 拿来直接⽤的函数, 比如print., input等等. 截⽌到python版本3.6.2 python⼀共提供了6 ...
- spring4.x hibernate4.x 整合 ehcache 注解 annotate
[From] http://my.oschina.net/alexgaoyh/blog/348188
- 爬虫之re块解析
一.re 这个去匹配比较麻烦,以后也比较少用,简单看一个案例就行 ''' 爬取数据流程: 1.指定url 2.发起请求 3.获取页面数据 4.数据解析 5.持久化存储 ''' import reque ...
- [jQuery] 在线引用地址
百度静态资源公共库: http://libs.baidu.com/jquery/1.9.1/jquery.js jQuery网站: http://code.jquery.com/jquery-1.9. ...