_css.scss 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. //
  2. // Copyright 2020 Google Inc.
  3. //
  4. // Permission is hereby granted, free of charge, to any person obtaining a copy
  5. // of this software and associated documentation files (the "Software"), to deal
  6. // in the Software without restriction, including without limitation the rights
  7. // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  8. // copies of the Software, and to permit persons to whom the Software is
  9. // furnished to do so, subject to the following conditions:
  10. //
  11. // The above copyright notice and this permission notice shall be included in
  12. // all copies or substantial portions of the Software.
  13. //
  14. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15. // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16. // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17. // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18. // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  19. // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  20. // THE SOFTWARE.
  21. //
  22. @use 'sass:list';
  23. @use 'sass:map';
  24. @use 'sass:meta';
  25. @use './gss';
  26. /// When true, add an additional property/value declaration before declarations
  27. /// that use advanced features such as custom properties or CSS functions. This
  28. /// adds fallback support for older browsers such as IE11 that do not support
  29. /// these features at the cost of additional CSS. Set this variable to false to
  30. /// disable generating fallback declarations.
  31. $enable-fallback-declarations: true !default;
  32. /// Writes a CSS property/value declaration. This mixin is used throughout the
  33. /// theme package for consistency for dynamically setting CSS property values.
  34. ///
  35. /// This mixin may optionally take a fallback value. For advanced features such
  36. /// as custom properties or CSS functions like min and max, a fallback value is
  37. /// recommended to support older browsers.
  38. ///
  39. /// @param {String} $property - The CSS property of the declaration.
  40. /// @param {*} $value - The value of the CSS declaration. The value should be
  41. /// resolved by other theme functions first (i.e. custom property Maps and
  42. /// Material theme keys are not supported in this mixin). If the value is
  43. /// null, no declarations will be emitted.
  44. /// @param {*} $fallback - An optional fallback value for older browsers. If
  45. /// provided, a second property/value declaration will be added before the
  46. /// main property/value declaration.
  47. /// @param {Map} $gss - An optional Map of GSS annotations to add.
  48. /// @param {Bool} $important - If true, add `!important` to the declaration.
  49. @mixin declaration(
  50. $property,
  51. $value,
  52. $fallback-value: null,
  53. $gss: (),
  54. $important: false
  55. ) {
  56. // Normally setting a null value to a property will not emit CSS, so mixins
  57. // wouldn't need to check this. However, Sass will throw an error if the
  58. // interpolated property is a custom property.
  59. @if $value != null {
  60. $important-rule: if($important, ' !important', '');
  61. @if $fallback-value and $enable-fallback-declarations {
  62. @include gss.annotate($gss);
  63. #{$property}: #{$fallback-value} #{$important-rule};
  64. // Add @alternate to annotations.
  65. $gss: map.merge(
  66. $gss,
  67. (
  68. alternate: true,
  69. )
  70. );
  71. }
  72. @include gss.annotate($gss);
  73. #{$property}: #{$value}#{$important-rule};
  74. }
  75. }
  76. /// Unpacks shorthand values for CSS properties (i.e. lists of 1-3 values).
  77. /// If a list of 4 values is given, it is returned as-is.
  78. ///
  79. /// Examples:
  80. ///
  81. /// unpack-value(4px) => 4px 4px 4px 4px
  82. /// unpack-value(4px 2px) => 4px 2px 4px 2px
  83. /// unpack-value(4px 2px 2px) => 4px 2px 2px 2px
  84. /// unpack-value(4px 2px 0 2px) => 4px 2px 0 2px
  85. ///
  86. /// @param {Number | Map | List} $value - List of 1 to 4 value numbers.
  87. /// @return {List} a List of 4 value numbers.
  88. @function unpack-value($value) {
  89. @if meta.type-of($value) == 'map' or list.length($value) == 1 {
  90. @return $value $value $value $value;
  91. } @else if list.length($value) == 4 {
  92. @return $value;
  93. } @else if list.length($value) == 3 {
  94. @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3)
  95. list.nth($value, 2);
  96. } @else if list.length($value) == 2 {
  97. @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 1)
  98. list.nth($value, 2);
  99. }
  100. @error "Invalid CSS property value: '#{$value}' is more than 4 values";
  101. }