CSS-TricksSass Snippets Feed | CSS-Tricks https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Tue, 23 Jul 2024 13:26:39 +0000 hourly 1 https://wordpress.org/?v=6.5.5 https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=32%2C32&ssl=1 Sass Snippets Feed | CSS-Tricks https://css-tricks.com 32 32 45537868 Caching the Current Selector (&) in Sass https://css-tricks.com/snippets/sass/caching-current-selector-sass/ https://css-tricks.com/snippets/sass/caching-current-selector-sass/#comments Tue, 14 Feb 2017 22:24:15 +0000 Chris Coyier http://css-tricks.com/?page_id=251511 The & character in Sass is unique in that it represents the current selector. It changes as you nest. Let’s say you are nested, but you want access to a selector back up the nesting a bit. The trick is …

]]>
The & character in Sass is unique in that it represents the current selector. It changes as you nest. Let’s say you are nested, but you want access to a selector back up the nesting a bit. The trick is to cache & and use it deeper in the nesting. (more…)

]]>
https://css-tricks.com/snippets/sass/caching-current-selector-sass/feed/ 7 251511
Use a Sass Variable for a Selector https://css-tricks.com/snippets/sass/use-sass-variable-selector/ https://css-tricks.com/snippets/sass/use-sass-variable-selector/#comments Mon, 02 Jan 2017 20:51:51 +0000 Chris Coyier http://css-tricks.com/?page_id=249595 Say you need to use a certain selector in multiple places in your code. It’s not tremendously common, to be sure, but stuff happens. Repeated code is typically an opportunity for abstraction. Abstracting values in Sass is easy, but selectors …

]]>
Say you need to use a certain selector in multiple places in your code. It’s not tremendously common, to be sure, but stuff happens. Repeated code is typically an opportunity for abstraction. Abstracting values in Sass is easy, but selectors is slightly trickier.

(more…)

]]>
https://css-tricks.com/snippets/sass/use-sass-variable-selector/feed/ 8 249595
Viewport Sized Typography with Minimum and Maximum Sizes https://css-tricks.com/snippets/sass/viewport-sized-typography-minimum-maximum-sizes/ https://css-tricks.com/snippets/sass/viewport-sized-typography-minimum-maximum-sizes/#comments Thu, 28 Jul 2016 15:50:07 +0000 Eduardo Bouças http://css-tricks.com/?page_id=243955 Declaring font sizes in viewport units can produce really interesting results, but it does come with challenges. There are no min-font-size or max-font-size properties in CSS, so edge cases where text gets too small or too big are difficult to …

]]>
Declaring font sizes in viewport units can produce really interesting results, but it does come with challenges. There are no min-font-size or max-font-size properties in CSS, so edge cases where text gets too small or too big are difficult to deal with.

This Sass mixin makes use of media queries to define a minimum and maximum size for the font, in pixels. It also supports an optional parameter to serve as a fallback to browsers that don’t support viewport units.

As an example, this is how you’d define a font as 5vw constrained between 35px and 150px (with a fallback of 50px for non-supporting browsers):

@include responsive-font(5vw, 35px, 150px, 50px);

And here’s the full mixin:

///
/// Viewport sized typography with minimum and maximum values
///
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number}   $responsive  - Viewport-based size
/// @param {Number}   $min         - Minimum font size (px)
/// @param {Number}   $max         - Maximum font size (px)
///                                  (optional)
/// @param {Number}   $fallback    - Fallback for viewport-
///                                  based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback), 
///                 minumum of 35px and maximum of 150px
///  @include responsive-font(5vw, 35px, 150px, 50px);
///
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;
  
  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }
  
  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;
    
    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }
  
  @if $fallback {
    font-size: $fallback;
  }
  
  font-size: $responsive;
}

Demo

See the Pen Viewport sized typography with minimum and maximum sizes by Eduardo Bouças (@eduardoboucas) on CodePen.

]]>
https://css-tricks.com/snippets/sass/viewport-sized-typography-minimum-maximum-sizes/feed/ 12 243955
Power Function https://css-tricks.com/snippets/sass/power-function/ https://css-tricks.com/snippets/sass/power-function/#comments Tue, 09 Feb 2016 14:26:59 +0000 Kitty Giraudel http://css-tricks.com/?page_id=237831 While very helpful with arithmetic, Sass falls a bit short with mathematical helper functions. There has been an open issue on the official repository to ask for more math-related functions for almost 3 years.

Some third-party vendors like Compass or …

]]>
While very helpful with arithmetic, Sass falls a bit short with mathematical helper functions. There has been an open issue on the official repository to ask for more math-related functions for almost 3 years.

Some third-party vendors like Compass or SassyMath provide advanced support for math features, but they are external dependencies which could (should?) be avoided.

One of the most popular request on this matter is a power function or even a exponent operator. Unfortunately, there is still no support for this in Sass and while it is still under active discussion, it is unlikely to happen very soon.

Meanwhile, being able to raise a number to a certain power happens to be very useful in CSS. Here are a few examples where it would come in handy:

Sass implementation

Fortunately for us, it is possible (and quite simple) to create a power function with nothing but Sass. All we need is a loop and some basic mathematical operators (such as * and /).

Positive integer exponents

Our function (named pow) in its smallest form would look like this:

@function pow($number, $exponent) {
  $value: 1;

  @if $exponent > 0 {
    @for $i from 1 through $exponent {
      $value: $value * $number;
    }
  }

  @return $value;
}

Here is an example:

.foo {
  width: pow(20, 2) * 1px; // 400px
}

Positive or negative integer exponents

However it only works with a positive `$power` argument. Allowing negative exponents wouldn’t be so hard, we just need a small extra condition:

@function pow($number, $exponent) {
  $value: 1;

  @if $exponent > 0 {
    @for $i from 1 through $exponent {
      $value: $value * $number;
    }
  } @else if $exponent < 0 {
    @for $i from 1 through -$exponent {
      $value: $value / $number;
    }
  }

  @return $value;
}

Here is an example:

.foo {
  width: pow(10, -2) * 1px; // 0.0001px
}

Positive or negative exponents

Now, what if we want non-integer exponents? Such as 4.2 for instance? The truth is that it really is not easy. It still is doable, but it requires more than just a loop and a few operations.

This has been done on the Bourbon repository in order to complete the modular-scale(..) function from the framework (although has been declined). Here is the code:

@function pow($number, $exponent) {
  @if (round($exponent) != $exponent) {
    @return exp($exponent * ln($number));
  }
    
  $value: 1;
  
  @if $exponent > 0 {
    @for $i from 1 through $exponent {
     $value: $value * $number;
    }
  } @else if $exponent < 0 {
    @for $i from 1 through -$exponent {
      $value: $value / $number;
    }
  }

  @return $value;
}

@function factorial($value) {
  $result: 1;

  @if $value == 0 {
    @return $result;
  }
  
  @for $index from 1 through $value {
    $result: $result * $index;
  }
  
  @return $result;
}

@function summation($iteratee, $input, $initial: 0, $limit: 100) {
  $sum: 0;
  
  @for $index from $initial to $limit {
    $sum: $sum + call($iteratee, $input, $index);
  }
  
  @return $sum;
}

@function exp-maclaurin($x, $n) {
  @return (pow($x, $n) / factorial($n));
}

@function exp($value) {
  @return summation('exp-maclaurin', $value, 0, 100);
}

@function ln-maclaurin($x, $n) {
  @return (pow(-1, $n + 1) / $n) * (pow($x - 1, $n));
}

@function ln($value) {
  $ten-exp: 1;
  $ln-ten: 2.30258509;
  
  @while ($value > pow(10, $ten-exp)) {
    $ten-exp: $ten-exp + 1;
  }
  
  @return summation(ln-maclaurin, $value / pow(10, $ten-exp), 1, 100) + $ten-exp * $ln-ten;
}

Further considerations

Well, that was intense. If you happen to need support for non-integer exponents (like 4.2), I recommend you use an external dependency which provides it (such as sass-math-pow) instead of including all this code in your project. Not that it is a bad thing per se, but it is not really the role of your project to host such a large a mount of non-authored polyfilling code (that’s why we have package managers).

Also note that all these operations are quite intensive for such a thin layer as Sass. At this point, and if your design rely on advanced mathematical functions, it is probably better to pass the implementation of these helpers from the upper layer (Node.js, Ruby, etc.) down to Sass through a plugin system (Eyeglass, Ruby gem, etc.).

But for basic pow(..) usage, I can’t recommend the simple versions enough!

]]>
https://css-tricks.com/snippets/sass/power-function/feed/ 5 237831
Mixin to Qualify a Selector https://css-tricks.com/snippets/sass/mixin-to-qualify-a-selector/ https://css-tricks.com/snippets/sass/mixin-to-qualify-a-selector/#comments Thu, 26 Feb 2015 08:29:12 +0000 Kitty Giraudel http://css-tricks.com/?page_id=196824 There is no easy way of qualifying a selector from within its associated ruleset. By qualifying I mean prepending an element name (e.g. a) to a class (e.g. .btn) so that a ruleset gets specific to a combination …

]]>
There is no easy way of qualifying a selector from within its associated ruleset. By qualifying I mean prepending an element name (e.g. a) to a class (e.g. .btn) so that a ruleset gets specific to a combination of an element selector and a class selector (e.g. a.btn) for instance.

As of today, the best (and so far only valid way) to do so is as follow:

.button {
  @at-root a#{&} {
    // Specific styles for `a.button`
  }
}

Wow, definitely not really elegant, is it? Ideally, you might want to hide this kind of horrific syntax behind a mixin so that you keep a clean and friendly API, especially if you have rookie developers in your team.

Doing so is extremely simple of course:

/// Since the current way to qualify a class from within its ruleset is quite
/// ugly, here is a mixin providing a friendly API to do so.
/// @author Kitty Giraudel
/// @param {String} $element-selector - Element selector
@mixin qualify($element-selector) {
  @at-root #{$element-selector + &} {
    @content;
  }
}

Now, rewriting our previous snippet:

.button {
  @include qualify(a) {
    // Specific styles for `a.button`
  }
}

Much better, right? Still, qualify can sound a bit tricky for inexperienced Sass tinkerers. You could provide an alias when a more descriptive name, such as when-is.

/// @alias qualify
@mixin when-is($args...) {
  @include qualify($args...) {
    @content;
  }
}

One final example:

.button {
  border: none;
  
  // Qualify `.button` with `button`
  @include qualify(button) {
    -webkit-appearance: none;
  }
  
  // Qualify `.button` with `a`
  @include when-is(a) {
    text-decoration: none;
  }
}
]]>
https://css-tricks.com/snippets/sass/mixin-to-qualify-a-selector/feed/ 9 196824