SCSS variable class name

Gustavo Fulton :

On my website, I'm constantly doing style="font-size: #ofpx;". However, I was wondering if there's a way to do it with scss so that, when I declare a class, it would also change the font size. For example:

<div class='col-lg-4 font-20'>whatever here</div>

and this would change my font-size to 20. If I did font-30, it would change my font-size to 30 and etc...

What I have so far:

.font-#{$fontsize} {
      font-size: $fontsize;
}
Woodrow Barlow :

This can't be done for arbitrary sizes. The nature of SCSS is that is needs to be flattened down to CSS before it gets applied to the HTML. What you are asking for, however, is essentially to create rules at run-time rather than compile-time.

In other words, SCSS makes it easier to write some of the repetitive parts of CSS, but it doesn't allow you to do anything new that wasn't already possible with plain old CSS.

What you're asking for is also a code smell. It smells like your markup isn't semantic enough. The purpose of a CSS class is to group objects with similar characteristics, but you're using them instead to describe the styles they impart. I would suggest stepping back and reconsidering what it is that you really want.

You obviously have details of certain elements that are context-dependent. For example, maybe you are applying these rules to buttons when you want to make them smaller or larger than usual. You need to identify the scenarios in which the buttons change. Maybe they are 20% smaller if they are in a modal dialog? Then write your normal .button rules, and also create rules for .modal .button which make it smaller.

If you're positive that you want to define font-size for each element within the HTML (and sometimes there are good reasons for doing so), just continue using inline styles. The only reason inline styling is frowned upon is because it combines model and view logic in a way that harms reusability; however, what you are requesting does so in exactly the same way. This is what inline styles were made for. Don't re-invent the wheel.

With all of that said, you can use sass loops to automatically generate classes for integers within a range. For example:

/* warning: this is generally a bad idea */
@for $i from 1 through 100 {
  .font-#{$i} {
    font-size: #{$i}px;
  }
}

This is not a good idea. Pragmatically speaking it doesn't offer any advantages over just using inline styles and with large ranges your resulting file will be larger (which affects website load times).

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

SCSS variable class name

分類Dev

SCSS variable class name

分類Dev

Applying CSS on class with variable name

分類Dev

Python class variable name vs __name__

分類Dev

Can class name and variable name be same in java?

分類Dev

How would I create a class with a variable name in the class name?

分類Dev

Get The Class Name From an Object Variable

分類Dev

Using Part of a Class Name as a Variable for .addClass

分類Dev

Using SCSS variable inside a variable

分類Dev

Passing a variable value, rather than its name, as a class

分類Dev

Referencing a sass/scss variable on the fly

分類Dev

Change Variable colors if else in scss

分類Dev

SCSS @import with&to children to class

分類Dev

Using scss variable inside css variable

分類Dev

Undefined reference to class_name<template_argument>function_name(variable)?

分類Dev

class_name <template_argument> function_name(variable)への未定義の参照?

分類Dev

Apply style to grandparent if grandchild has class (SCSS)

分類Dev

How to add a "modified" class for an element in SCSS

分類Dev

How to check if a member name (variable or function) exists in a class, with or without specifying type?

分類Dev

Why does assigning to a class attribute with the same name as a local variable raise a NameError?

分類Dev

Why javascript static variable not able to access ( using class name ) without creating minimum one instance?

分類Dev

Variable string inside variable name

分類Dev

Concatenate variable and function name

分類Dev

Variable name not found

分類Dev

Put variable in UserForm name

分類Dev

Compare variable name to a string

分類Dev

String to variable name Haskell

分類Dev

Unexpected token in variable name

分類Dev

variable `-name` primary to `find`

Related 関連記事

  1. 1

    SCSS variable class name

  2. 2

    SCSS variable class name

  3. 3

    Applying CSS on class with variable name

  4. 4

    Python class variable name vs __name__

  5. 5

    Can class name and variable name be same in java?

  6. 6

    How would I create a class with a variable name in the class name?

  7. 7

    Get The Class Name From an Object Variable

  8. 8

    Using Part of a Class Name as a Variable for .addClass

  9. 9

    Using SCSS variable inside a variable

  10. 10

    Passing a variable value, rather than its name, as a class

  11. 11

    Referencing a sass/scss variable on the fly

  12. 12

    Change Variable colors if else in scss

  13. 13

    SCSS @import with&to children to class

  14. 14

    Using scss variable inside css variable

  15. 15

    Undefined reference to class_name<template_argument>function_name(variable)?

  16. 16

    class_name <template_argument> function_name(variable)への未定義の参照?

  17. 17

    Apply style to grandparent if grandchild has class (SCSS)

  18. 18

    How to add a "modified" class for an element in SCSS

  19. 19

    How to check if a member name (variable or function) exists in a class, with or without specifying type?

  20. 20

    Why does assigning to a class attribute with the same name as a local variable raise a NameError?

  21. 21

    Why javascript static variable not able to access ( using class name ) without creating minimum one instance?

  22. 22

    Variable string inside variable name

  23. 23

    Concatenate variable and function name

  24. 24

    Variable name not found

  25. 25

    Put variable in UserForm name

  26. 26

    Compare variable name to a string

  27. 27

    String to variable name Haskell

  28. 28

    Unexpected token in variable name

  29. 29

    variable `-name` primary to `find`

ホットタグ

アーカイブ