mirror of
https://github.com/danog/sass-site.git
synced 2024-11-30 04:29:17 +01:00
Porting Documentation - At-Rules - warn
This commit is contained in:
parent
08df8bc72c
commit
060eeb21db
66
source/documentation/at-rules/warn.liquid
Normal file
66
source/documentation/at-rules/warn.liquid
Normal file
@ -0,0 +1,66 @@
|
||||
---
|
||||
title: "@warn"
|
||||
introduction: >
|
||||
When writing [mixins](/documentation/at-rules/mixin) and [functions](/documentation/at-rules/function), you may want to
|
||||
discourage users from passing certain arguments or certain values. They may be
|
||||
passing legacy arguments that are now deprecated, or they may be calling your
|
||||
API in a way that’s not quite optimal.
|
||||
---
|
||||
|
||||
{% markdown %}
|
||||
The `@warn` rule is designed just for that. It's written `@warn <expression>`
|
||||
and it prints the value of the [expression][] (usually a string) for the user,
|
||||
along with a stack trace indicating how the current mixin or function was
|
||||
called. Unlike the [`@error` rule][], though, it doesn't stop Sass entirely.
|
||||
|
||||
[expression]: /documentation/syntax/structure#expressions
|
||||
[`@error` rule]: /documentation/at-rules/error
|
||||
{% endmarkdown %}
|
||||
|
||||
{% codeExample 'warn' %}
|
||||
$known-prefixes: webkit, moz, ms, o;
|
||||
|
||||
@mixin prefix($property, $value, $prefixes) {
|
||||
@each $prefix in $prefixes {
|
||||
@if not index($known-prefixes, $prefix) {
|
||||
@warn "Unknown prefix #{$prefix}.";
|
||||
}
|
||||
|
||||
-#{$prefix}-#{$property}: $value;
|
||||
}
|
||||
#{$property}: $value;
|
||||
}
|
||||
|
||||
.tilt {
|
||||
// Oops, we typo'd "webkit" as "wekbit"!
|
||||
@include prefix(transform, rotate(15deg), wekbit ms);
|
||||
}
|
||||
===
|
||||
$known-prefixes: webkit, moz, ms, o
|
||||
|
||||
@mixin prefix($property, $value, $prefixes)
|
||||
@each $prefix in $prefixes
|
||||
@if not index($known-prefixes, $prefix)
|
||||
@warn "Unknown prefix #{$prefix}."
|
||||
|
||||
|
||||
-#{$prefix}-#{$property}: $value
|
||||
|
||||
#{$property}: $value
|
||||
|
||||
|
||||
.tilt
|
||||
// Oops, we typo'd "webkit" as "wekbit"!
|
||||
@include prefix(transform, rotate(15deg), wekbit ms)
|
||||
{% endcodeExample %}
|
||||
|
||||
{% markdown %}
|
||||
The exact format of the warning and stack trace varies from implementation to
|
||||
implementation. This is what it looks like in Dart Sass:
|
||||
|
||||
```
|
||||
Warning: Unknown prefix wekbit.
|
||||
example.scss 6:7 prefix()
|
||||
example.scss 16:3 root stylesheet
|
||||
```
|
||||
{% endmarkdown %}
|
Loading…
Reference in New Issue
Block a user