- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用 gulp 编译基础 6 时,我收到此错误
Undefined operation: "-zf-bp-to-em(0) gt 0em on line 82 of ../bower_components/foundation-sites/scss/util/_breakpoint.scss from line 12 of ../scss/main.scss
// Sass utilities
@import '../bower_components/foundation-sites/scss/util/breakpoint';
@import '../bower_components/foundation-sites/scss/util/color';
@import '../bower_components/foundation-sites/scss/util/mixins';
@import '../bower_components/foundation-sites/scss/util/selector';
@import '../bower_components/foundation-sites/scss/util/unit';
@import '../bower_components/foundation-sites/scss/util/util';
@import '../bower_components/foundation-sites/scss/util/value';
// Global variables and styles
@import '../bower_components/foundation-sites/scss/global';
// Components
@import '../bower_components/foundation-sites/scss/grid/grid';
@import '../bower_components/foundation-sites/scss/typography/alignment';
@import '../bower_components/foundation-sites/scss/typography/base';
@import '../bower_components/foundation-sites/scss/typography/helpers';
@import '../bower_components/foundation-sites/scss/typography/print';
@import '../bower_components/foundation-sites/scss/typography/typography';
@import '../bower_components/foundation-sites/scss/forms/checkbox';
@import '../bower_components/foundation-sites/scss/forms/error';
@import '../bower_components/foundation-sites/scss/forms/fieldset';
@import '../bower_components/foundation-sites/scss/forms/forms';
@import '../bower_components/foundation-sites/scss/forms/help-text';
@import '../bower_components/foundation-sites/scss/forms/input-group';
@import '../bower_components/foundation-sites/scss/forms/label';
@import '../bower_components/foundation-sites/scss/forms/select';
@import '../bower_components/foundation-sites/scss/forms/text';
@import '../bower_components/foundation-sites/scss/components/visibility';
@import '../bower_components/foundation-sites/scss/components/float';
@import '../bower_components/foundation-sites/scss/components/button';
@import '../bower_components/foundation-sites/scss/components/button-group';
@import '../bower_components/foundation-sites/scss/components/accordion-menu';
@import '../bower_components/foundation-sites/scss/components/accordion';
@import '../bower_components/foundation-sites/scss/components/badge';
@import '../bower_components/foundation-sites/scss/components/breadcrumbs';
@import '../bower_components/foundation-sites/scss/components/callout';
@import '../bower_components/foundation-sites/scss/components/close-button';
@import '../bower_components/foundation-sites/scss/components/drilldown';
@import '../bower_components/foundation-sites/scss/components/dropdown-menu';
@import '../bower_components/foundation-sites/scss/components/dropdown';
@import '../bower_components/foundation-sites/scss/components/flex-video';
@import '../bower_components/foundation-sites/scss/components/label';
@import '../bower_components/foundation-sites/scss/components/media-object';
@import '../bower_components/foundation-sites/scss/components/menu';
@import '../bower_components/foundation-sites/scss/components/off-canvas';
@import '../bower_components/foundation-sites/scss/components/orbit';
@import '../bower_components/foundation-sites/scss/components/pagination';
@import '../bower_components/foundation-sites/scss/components/progress-bar';
@import '../bower_components/foundation-sites/scss/components/reveal';
@import '../bower_components/foundation-sites/scss/components/slider';
@import '../bower_components/foundation-sites/scss/components/sticky';
@import '../bower_components/foundation-sites/scss/components/switch';
@import '../bower_components/foundation-sites/scss/components/table';
@import '../bower_components/foundation-sites/scss/components/tabs';
@import '../bower_components/foundation-sites/scss/components/title-bar';
@import '../bower_components/foundation-sites/scss/components/top-bar';
@import '../bower_components/foundation-sites/scss/components/thumbnail';
@import '../bower_components/foundation-sites/scss/components/tooltip';
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group breakpoints
////
// scss-lint:disable ZeroUnit
/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
/// @type Map
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
) !default;
$-zf-zero-breakpoint: small !default;
@if nth(map-values($breakpoints), 1) != 0 {
@error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
}
@else {
$-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);
}
/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
/// @type List
$breakpoint-classes: (small medium large) !default;
/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.
///
/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
@function breakpoint($val: $-zf-zero-breakpoint) {
// Size or keyword
$bp: nth($val, 1);
// Value for max-width media queries
$bp-max: 0;
// Direction of media query (up, down, or only)
$dir: if(length($val) > 1, nth($val, 2), up);
// Eventual output
$str: '';
// Is it a named media query?
$named: false;
// Orientation media queries have a unique syntax
@if $bp == 'landscape' or $bp == 'portrait' {
@return '(orientation: #{$bp})';
}
@else if $bp == 'retina' {
@return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
}
// Try to pull a named breakpoint out of the $breakpoints map
@if type-of($bp) == 'string' {
@if map-has-key($breakpoints, $bp) {
@if $dir == 'only' or $dir == 'down' {
$bp-max: -zf-map-next($breakpoints, $bp);
}
$bp: map-get($breakpoints, $bp);
$named: true;
}
@else {
$bp: 0;
@warn 'breakpoint(): "#{$val}" is not defined in your $breakpoints setting.';
}
}
// Convert any pixel, rem, or unitless value to em
$bp: -zf-bp-to-em($bp);
@if $bp-max {
$bp-max: -zf-bp-to-em($bp-max) - (1/16);
}
// Conditions to skip media query creation
// - It's a named breakpoint that resolved to "0 down" or "0 up"
// - It's a numeric breakpoint that resolved to "0 " + anything
@if $bp > 0em or $dir == 'only' or $dir == 'down' {
// `only` ranges use the format `(min-width: n) and (max-width: n)`
@if $dir == 'only' {
// Only named media queries can have an "only" range
@if $named == true {
// Only use "min-width" if the floor is greater than 0
@if $bp > 0em {
$str: $str + '(min-width: #{$bp})';
// Only add "and" to the media query if there's a ceiling
@if $bp-max != null {
$str: $str + ' and ';
}
}
// Only use "max-width" if there's a ceiling
@if $bp-max != null {
$str: $str + '(max-width: #{$bp-max})';
}
}
@else {
@warn 'breakpoint(): Only named media queries can have an `only` range.';
}
}
// `down` ranges use the format `(max-width: n)`
@else if $dir == 'down' {
$max: if($named, $bp-max, $bp);
// Skip media query creation if input value is exactly "0 down",
// unless the function was called as "small down", in which case it's just "small only"
@if $named or $bp > 0em {
@if $max != null {
$str: $str + '(max-width: #{$max})';
}
}
}
// `up` ranges use the format `(min-width: n)`
@else if $bp > 0em {
$str: $str + '(min-width: #{$bp})';
}
}
@return $str;
}
/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:
/// - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.
/// - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.
/// - If a rem value is passed, the unit will be changed to em.
/// - If an em value is passed, the value will be used as-is.
///
/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.
///
/// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.
@mixin breakpoint($value) {
$str: breakpoint($value);
// If $str is still an empty string, no media query is needed
@if $str == '' {
@content;
}
// Otherwise, wrap the content in a media query
@else {
@media screen and #{$str} {
@content;
}
}
}
/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `<meta>` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.
/// @access private
///
/// @param {Map} $map - Map to convert.
///
/// @returns {String} A string containing the map's contents.
@function -zf-bp-serialize($map) {
$str: '';
@each $key, $value in $map {
$str: $str + $key + '=' + -zf-bp-to-em($value) + '&';
}
$str: str-slice($str, 1, -2);
@return $str;
}
/// Find the next key in a map.
/// @access private
///
/// @param {Map} $map - Map to traverse.
/// @param {Mixed} $key - Key to use as a starting point.
///
/// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.
@function -zf-map-next($map, $key) {
// Store the values of the map as a list, so we can access them with nth
$values: map-values($map);
// Ghetto for loop
$i: 1;
$found: false;
@each $val in map-keys($map) {
@if $found == false {
@if ($key == $val) {
$found: true;
}
$i: $i + 1;
}
}
// If the key doesn't exist, or it's the last key in the map, return null
@if $i > length($map) {
@return null;
}
// Otherwise, return the value
@else {
@return nth($values, $i);
}
}
/// Get a value for a breakpoint from a responsive config map. If the config map has the key `$value`, the exact breakpoint value is returned. If the config map does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.
/// @access private
///
/// @param {Map} $map - Input config map.
/// @param {Keyword} $value - Breakpoint name to use.
///
/// @return {Mixed} The corresponding breakpoint value.
@function -zf-get-bp-val($map, $value) {
// Check if the breakpoint name exists globally
@if not map-has-key($breakpoints, $value) {
@return null;
}
// Check if the breakpoint name exists in the local config map
@else if map-has-key($map, $value) {
// If it does, just return the value
@return map-get($map, $value);
}
// Otherwise, find the next lowest breakpoint and return that value
@else {
$anchor: null;
$found: false;
@each $key, $val in $breakpoints {
@if not $found {
@if map-has-key($map, $key) {
$anchor: $key;
}
@if $key == $value {
$found: true;
}
}
}
@return map-get($map, $anchor);
}
}
// Legacy breakpoint variables
// These will be removed in 6.3
$small-up: null;
$small-only: null;
$medium-up: null;
$medium-only: null;
$large-up: null;
$large-only: null;
$xlarge-up: null;
$xlarge-only: null;
$xxlarge-up: null;
$xxlarge-only: null;
@if map-has-key($breakpoints, small) {
$small-up: screen;
$small-only: unquote('screen and #{breakpoint(small only)}');
}
@if map-has-key($breakpoints, medium) {
$medium-up: unquote('screen and #{breakpoint(medium)}');
$medium-only: unquote('screen and #{breakpoint(medium only)}');
}
@if map-has-key($breakpoints, large) {
$large-up: unquote('screen and #{breakpoint(large)}');
$large-only: unquote('screen and #{breakpoint(large only)}');
}
@if map-has-key($breakpoints, xlarge) {
$xlarge-up: unquote('screen and #{breakpoint(xlarge)}');
$xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');
}
@if map-has-key($breakpoints, xxlarge) {
$xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');
}
最佳答案
尝试添加:
@import 'util/_unit';
@import 'util/breakpoint';
关于sass - 未定义操作 : "-zf-bp-to-em(0) gt 0em" when compiling foundation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37861269/
我遇到了这个错误: java.lang.IllegalArgumentException: Removing a detached instance model.student 然后我在stackov
em在中是什么意思 ... 这是从 firefox 插件 install.rdf 文件中提取的。我很好奇 em 部分添加了什么。我在 Google 上也找不到解决方案。 最佳答案 em 是包含 des
在如下所示的脚本中 create queue one create queue two create topic three 如何评论一行? 最佳答案 我可以在工具本身或文档中找到注释。 您可以做的最
谁能解释一下为什么 Redis (redis-rb) 同步驱动程序直接在 EM.synchrony block 下工作,但不在 EM:Connection 内工作? 考虑下面的例子 EM.sy
在下面,我需要得到: String regex = "Item#: .*"; String content = "xxx Item#: something yyy"; Pattern pattern
em 和 % 在文本大小调整和固定宽度站点方面有什么区别?如果我使用 em 或 % 仅用于固定宽度站点中的文本大小调整,并且正文设置为 {body:font-size:100%} 在可访问性和移动设备
这两个 CSS 语句有什么区别: h1 em { color:#ddd; } 和 h1 > em { color:#ddd; } 据我所知他们做的是完全一样的事情(虽然根据我在 W3C 上读到的第一种
在CSS3 CSS Fonts Module Level 3 (candidate Oct 13) , 在第 2.3 节中有一个对“EM 盒”的引用和一个对“EM 单元”的引用。引用如下: [The
em.find(Enity.classs, Id) em.createQuery("SELECT e From Entity e WHERE e.Id=:id") 它们是等价的吗?如果不是,它们有何不
在 CSS 中,em 是一个基于文档字体大小的相对单位。那么,如果文档本身 的字体大小以em 为单位,那么em 到底是什么?假设我们说: body { font-size: 1em; }
有实体 /** * @ORM\Entity(repositoryClass="Some\Namspace\CustomRepository") * @ORM\Table(name="image_t
您好,我有一个关于 Doctrine 的快速问题以及 merge() 和 persist() 之间的区别 我有一个 NewsBuilder 类: 这需要一个新闻实体并检查它是否存在于数据库,如果存在,
我有下面的代码,想知道 JPA 如何知道保留此更新。我预计需要 em.merge() 才能执行更新。这真的安全吗? @Stateless class User { ... public
在 JPA 中,是否保证以下片段的事务语义(=从数据库的角度来看的效果)是相同的? 片段A EntityManager em = ... List workList = ... for(Work wo
我现在正在使用 EventMachine 玩了几天,恕我直言,它的学习曲线很陡;-) 我尝试通过触发回调中需要的 HttpHeaderCrawler.query() 来返回哈希。但是在这种情况下我得到
我有以下 HTML 代码: Hello World 我正在设计它的样式: h1 {font-size:100pt} 如何将此 100pt 转换为 EM 和 REM? 最佳答案 在 CSS 中, - p
我是 OpenCV 和 C++ 的新手,我正在尝试使用 OpenCV 中的高斯混合模型构建分类器。我弄清楚了它是如何工作的,并让它工作了……也许吧。我现在得到了这样的东西: 如果我在模型训练和保存后立
我们有一个 TIBCO EMS 解决方案,它在 2-4 服务器环境中使用内置服务器故障转移。如果 TIBCO 管理员将服务从一台 EMS 服务器故障转移到另一台,则连接应该会在 EMS 服务级别自动转
YUI 中的这一行 Reset CSS给我带来了麻烦: address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;
我想并发下载网页,所以我找到了这些库, 但是我分不清em-synchrony和em-http-request的关系? 我查看了每个存储库的 github,但似乎所有示例都是关于自己的, 但是从一些文章
我是一名优秀的程序员,十分优秀!