I was looking to join 2 styles together to make a super style for easy use and customisation of my page.
Is it possible to define something like this? (if so how)
.bold { font-weight: bold;}
.color1 {color: white;}
.boldColor {.bold; .color1;}
where .boldColor is effectively
.boldColor {font-weight:bold; color:white;}
I want this so that I can have styles thoughout the page and be able to easily change the colors in many places in 1 place. I'm currently using <p class="bold color"> but some of my class defs are becoming long so I'd like to be able to use <p class="boldColor">
Thanks
You can't do exactly what you are asking for but you can get similar effects by using a comma to separate multiple css selectors that share the same properties.
.bold, .boldColor {
font-weight: bold;
}
.color1, .boldColor {
color: white;
}
This way class="boldColor" will have the same effect as class="color1 bold".
This is not possible using normal CSS. You would usually do this, as you already say, by combining class names: bold color
There are CSS "pre-compilers" that can do advanced things on CSS stylesheets, like working with variables. I don't know of any that does "class fusions" like you request but I'm sure they can be helpful in reducing code size. Check out LESS and xCSS, for example.
No, the CSS spec does not support this.
No you cannot do this. How you are doing it currently is ideal.
Check out LessCss (.NET version)
Related
I'm getting into scss and have been trying to apply most of my styles through variables.
There is certain variables that I want with multiple styles. For example something related to fonts.
I want all 12px size fonts to be red.
I declared a variable like
$font-12: (font-size: 12x, color: red)
Obviously I can't apply this variable like normal ones since it includes multiple styles.
Is this the correct way to declare a variable like this?
Can I even apply this variable like this?
If not, what is the correct way to apply related styles using scss?
Thanks.
You can do this via mixins.
#mixin font-12(){
font-size: 12px;
color: red;
}
Documentation: https://sass-lang.com/guide
However you can also do this in native CSS.
Simply create a utility class (this is a normal css class, I call it a utility class because it's reusable):
.font-12 {
font-size: 12px;
color: red;
}
And apply this class to any elements you want IE:
<div class="card font-12"> ..some card... </div>
<h3 class="card-title font-12"> .. some card title.. </h3>
I'm sorry, I would have liked to comment alex067's answer but as I'm not very active here my reputation would not suffice to comment therefore I have to post it as an answer:
Using a mixin is exactly the correct answer.
BUT: I strongly advise against the second proposed option!
While is is technically correct, doing it that way defeats the whole purposes of using CSS in the first instance. We could more or less go back to using old-style font-color tags etc. if we would go about it this way.
CSS is made to abstract content/semantics from design for a host of very good reasons. If you want to go the pure CSS way (no SASS) at least name your style something like 'unimportant' or 'by-line' so that it could make sense when you redefine it for different screens, high-contrast schemes, screen-reader output etc.
[With Bootstap and all those other bloody frameworks out there it seems that nobody cares about clear accessible structure and using stuff the right way; and my struggle for doing things the intended way may be futile - still I feel the need to fight for it.]
I'm curious what the CSS directive #apply does. I have googled #apply but I couldn't find anything that could explain its meaning properly for me.
What is the usage of such a directive?
The simple way of explaining it would be; introducing variables into CSS (which is a feature of preprocessors, such as Sass), and mixins which are function like behaviors (also in preprocessors).
Imagine that --header-theme is a function (mixin):
:root {
--header-theme: {
color: red;
font-family: cursive;
font-weight: 600;
};
}
h1 {
#apply --header-theme;
}
h2 {
#apply --header-theme;
}
This way, you can use it in many different places without having to rewrite it again (DRY).
Now the variable part could be explained with this example:
:root {
--brand-color: red; /* Default value */
--header-theme: {
color: var(--brand-color);
font-family: cursive;
font-weight: 600;
};
}
h1 {
#apply --header-theme;
}
h2 {
--brand-color: green;
#apply --header-theme;
}
The mixin will have a variable sent to it and change the color.
This is not the limits of the feature, and you can use it for far more. You can read more about mixin and variables in Sass for other ways of using it, and after I suggest you read this blog post.
Now after I got you excited, it is time for the bad news. It is not implemented in browsers yet (Chrome), but it is still worth knowing that it is coming and maybe if you want to prepare yourself start with Sass.
#apply is from a proposal that has since been abandoned, and replaced with CSS Shadow Parts.
the #apply rule, which allows an author to store a set of properties
in a named variable, then reference them in other style rules.
Tailwind uses this as a special directive.
Tailwind's #apply is kind of like a super-class. You can list other classes that should apply to this rule. I think of it as a way to group classes together that are often found together.
#apply is pretty cool. It basically allows you to reuse CSS blocks without having to copy them around and without having to modify their selectors.
It will make it easier to use CSS frameworks and keep semantic class names at the same time.
I found this article to be a nice instruction to this feature.
Unfortunately, at the moment, browser support is basically non-existent. It can be used with a CSS pre-processor such as PostCSS.
It's future is also uncertain, if I understand well. The main advocate behind this feature stopped supporting it.
I have a general style sheet (general.css) that spans across each page of my site, and more specific style sheets that apply to certain pages. I'd like to take one of the selectors from general.css and embed it into the selectors of my specific sheets.
For example:
(From general.css)
.PrimaryFont {
font-family:"Palatino Linotype", "Book Antiqua", serif;
text-transform: uppercase;
font-weight: normal;
}
(From specific.css)
h1 {
.PrimaryFont;
font-size: 18pt;
}
This way, I won't have to mark up my html to death, and, if I choose to change the Primary Font, I will only have to do so in one spot.
I know LESS lets you embed, but since I'm new to CSS I was hoping there was some magical way a third party wasn't necessary.
Thanks!
Nope. CSS doesn't allow for mixins. You need to use something like LESS/SASS or some other CSS meta framework
The best way to do in plain CSS would be just adding extra classes to elements, but as well as being messy that can quickly get excessive. I would really recommend trying out LESS - it is amazingly good to use.
I have an element which appears on many pages and I would like to style it differently based on the class of the high-level div which it is present in. For example, if I want to change the color of my logo depending on the "type" of page it is present on. Then let's say these types can be grouped (so typeA, typeB and typeC should use one color while typeD and typeE should use another). Also, as high-level div's these types are used for other things as well so they cannot be merged.
.typeA #logo,
.typeB #logo,
.typeC #logo{
color: #ffffff;
}
.typeD #logo,
.typeE #logo,{
color: #000000;
}
Is there a way to chain together with some selector so that I don't have to make this code look so nasty. This example is small but the real-world version involves a whole lot more types. Is there a way to do something like:
.typeA || .typeB || .typeC #logo{
color: #ffffff;
}
As others said, CSS doesn't support that kind of grouping.
If you have control over your markup, why not just add a common class to each group of type classes then select that common class?
Example:
<div class="typeA type1">
<span id="logo">Site Title</span>
</div>
<div class="typeD type2">
<span id="logo">Site Title</span>
</div>
.type1 #logo { color: #ffffff; }
.type2 #logo { color: #000000; }
In short: no.
There are systems like LESS which make this possible but the rendered css will still look like your first example
Sorry, not in straight CSS, no. There are projects like http://sass-lang.com/ that require an external compiler to do what you want, however.
This isn't possible with pure CSS. It can be done however with a meta language like SASS. Check out http://sass-lang.com/ for more information.
There is no "or" in css that i know of. Just use a different selector that is a parent of typeA,B and C like "containerA" or "containerB"
I'm not sure what to call this, but basically let's say I have a style that I use a lot,
.somepattern{
font-size:16px;
font-weight:bold;
border:2px solid red;
}
but sometime I want to change the font-size and the color for border. Is it possible to treat this code as a library, where I can set the style to a div
<div class="somepattern">Text</div>
but still control the 16px and red like we do with functions?
I know I'm late to the party but the selected answer IS NOT the right answer since it's deferring it to CSS preprocessors.
To answer the specific question "Do CSS functions exist?", the answer is: Yes.
However, CSS functions work completely different than the OP's concept initially is.
cuixiping's answer seems the most correct answer.
Examples of CSS functions are:
url()
attr()
calc()
rotate()
scale()
linear-gradient()
sepia()
grayscale()
translate()
A detailed, comprehensive list can be found here:
CSS functions on MDN Updated link 18/9/20
You can't programatically control CSS from your markup, but you can use one of the many CSS extensions to make CSS work more like a compiled language.
http://lesscss.org/
http://sass-lang.com/
If we wrote your example in LESS, we'd get something like this:
.somepattern(#color: red, #size: 16px) {
font-size:#size;
font-weight:bold;
border:2px solid #color;
}
And then you could use it in your LESS file like so:
.myclass {
.somepattern(green, 20px);
}
Nope. No CSS functionality like you require. At least not directly.
But there are at least two rather generic ways for you to use to accomplish what you need:
Class combining
You can of course combine as many classes as you like in any element like:
<div class="heading run-in">
Some heading
</div>
Lorem ipsum dolor sit amet...
and you'd have CSS defined as:
.heading {
color: #999;
font-size: 16pt;
font-weight: bold;
border-bottom: 2px solid red;
display: block;
margin: 1.5em 0 .5em;
}
.run-in {
display: inline;
margin: 0;
font-size: 1em;
}
LESS CSS
And there is of course LESS CSS project that lets you define variables (and has other sugars as well) and use them in other classes.
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.
If your server platform is .net there's a project DotLessCSS with a library in .net as well. And there's also T4 template by Phil Haack.
Mind that there are many CSS preprocessors/enhancers like LESS CSS as well:
SASS
xCSS
HSS
CleverCSS
And probably some others that I didn't mention. Some support nesting CSS3 selectors as well others don't. Some are aimed at particular server-side technology some don't. So choose wisely.
you can redefine style by adding the style tag to your HTML:
<div class="somepattern" style="font-size:5px">Text</div>
or by applying multiple classes like class="somepattern small".
HTML
<div class="somepattern small"> Text </div>
CSS
.small {
font-size:5px;
}
the small class will be applied after the somepattern class and will therefore override any properties set in the some pattern class.
Even later to the party!
You can now do this with css custom variables.
In our css using the var() function:
.some-pattern {
font-size: var(--font-size);
font-weight: bold;
border: var(--border);
}
Then in our html defining the custom variables inline:
<div
class="some-pattern"
style="--border: 3px double red; --font-size: 16px;"
>
test
</div>
What you described is actually done with style attribute.
<div class="somepattern" style="font-size:10px;">Text</div>
I think this is exactly what you want. And it is not recommended, because it breaks the usual (good) pattern of spitting content and its visual style. (Although, honestly, I do use it a lot. ;-))
its a css class. It cannot be used like functions if that's what you are asking. There is no code library as its not a compiled. CSS is just presentation semantics (formatting) of a document written in a markup language. You can include all css classes in a .css file and use it where ever you want instead.
I've come to realize through the comments of others that this solution overcomplicates the problem at hand. This solution works but there are easier and better alternatives that do not depend on server-side scripting.
You can actually control your stylesheet if you make it a php file stylesheet.php?fontsize=16 and then inside your stylesheet you can retrieve the variable
<?php
header("Content-type: text/css");
$fontsize=16;
?>
.somepattern{
font-size: $fontsize;
font-weight:bold;
border:2px solid red;
}
Yes, it's possible. But you have to make it on your own with the help of Recatjs(u don't have to go deeper, basic is enough for this). Actually, think like that If bootstrap can make such things where we just have to define the class name and it automatically designes HTML files, then why we cannot do it.
Here's the image of my code(https://i.stack.imgur.com/hyePO.png)
and this is how I used it in my jsx code (https://i.stack.imgur.com/yK6VD.jpg)
Do you mean inline styles ? <div class="somepattern" style="border-color:green">Text</div>