At the moment I try to create a small less mixin to add styles to placeholders.
The values are passed through an object. My solution now looks like this:
.placeholder(#rules){
&::-webkit-input-placeholder, &:-moz-placeholder,
&::-moz-placeholder,&:-ms-input-placeholder{
#rules();
}
}
I try to use this mixin like this:
input{
.placeholder({color:green})
}
So less generates:
input::-webkit-input-placeholder, input:-moz-placeholder,
input::-moz-placeholder, input:-ms-input-placeholder{
color: green;
}
The code evens has been generated like I want it, but the wished effect not entered. But when I cut the code and fill it in devtools it works.
Does anybody find a mistake. I don't get it
From css-tricks.com:
That would be nice, but the problem is that when a browser doesn’t understand a selector, it invalidates the entire line of selectors (except IE 7).
So you'll have to seperate the placeholder selectors:
.placeholder(#rules){
&::-webkit-input-placeholder{
#rules();
}
&:-moz-placeholder{
#rules();
}
&::-moz-placeholder{
#rules();
}
&:-ms-input-placeholder{
#rules();
}
}
Related
It sounds like this is something that sass/less/mixins/jquery are required for right now.
What I'm looking to do is something like this:
.myClass {
color: blue;
}
h1 {
class: myClass;
}
I'm curious why this was not done already, given that CSS seems to be about inheritance/aggregation if nothing else.
Does it not make sense for some reason?
Or maybe it's just too complex?
Thanks!
...I don't know if this is the first '#extend' proposal, but it comes out because of its popularity in sass, apparently: http://tabatkins.github.io/specs/css-extend-rule/
and there is an early discussion of the proposal in this list thread: https://lists.w3.org/Archives/Public/public-houdini/2015Jan/0005.html
Not sure if it is going to be a future CSS standard. But you can already do it with SASS and SCSS. Here is SCSS syntax:
.myClass {
color: blue;
}
h1 {
#extend .myClass;
...
}
Documentation: https://sass-lang.com/documentation/at-rules/extend
Well, in effect what you are trying to do is to make your CSS properties defined in the .myClass block, apply in your h1 block, (correct me if I'm wrong).
If that's what you meant, you can already do that by simply adding myClass to your h1 tag like <h1 class="myClass">Header</h1> and in your CSS you would do this:
.myClass {
color: blue;
}
// or
h1.myClass {
color: blue; // To only target h1 that have the 'myClass' class
}
Will future CSS standard allow applying classes to elements in a style declaration?
Well as you can see we can already do that with HTML, so I doubt it.
Lets say i have a div like
<div class="col-d-1 col-m-5">some content</div>
I want to select the div. Normaly no problem... My problem is, there is more css that acts on this div. So I dont want to use !important. I try to use more than one selector to keep this one "important". Now i know there will be a col-m- but i dont know the value.... even if its 1, 2, 3 or what ever...
Actually in CSS i would use
.col-d-1 [class^='col-m-'] {
background: red;
}
something like this to select my col-d-1 having some col-m-
But how to convert this to less ?
I thought
.col-d-1 {
&.col-m-* {
background: red;
}
}
But nothing i tried works ^^
Any suggestions ?
Or is this less allready ?
This should work for you:
.col-d-1 {
&[class*='col-m-'] {
background: red;
}
}
codepen example
Well, LESS does recognise CSS, so keep it unchanged should work.
The other option is just combine it using the raw selector:
.col-d-1 {
&[class*='col-m-'] {
background: red;
}
}
Because you are pattern-matching on the class attribute, not checking if a class within it starts with col-m-, you need to use the contains selector *=, no the starts-with selector.
So lets say I set the background of 10 elements on the page to #base, then a user lands on the "Foo" page which has the class on the body of the page.
How does one update the #base via a css declaration? I understand that variables are local to a function (or css declaration) but there must be a method to do this! (would make styling alternative pages so easy!)
#base: #00000;
body.foo{
#base = #FFF;
}
LESS is a Preprocessor so...
...it all has to be precompiled into CSS ahead of time. That means all possible class combinations need to be made into valid CSS ahead of time. If you wanted something like this, you would need to do something like the following in your LESS:
LESS
#base: #000000;
.setColorOptions(#className: ~'', #base: #base) {
#classDot: escape(`('#{className}' == '' ? '' : '.')`);
#class: escape(#className);
body#{classDot}#{class} {
someElement {color: #base;}
.someClass {color: #base;}
// etc.
}
}
.setColorOptions();
.setColorOptions(foo, #fff);
.setColorOptions(bar, #ccc);
CSS Output
body someElement {
color: #000000;
}
body .someClass {
color: #000000;
}
body.foo someElement {
color: #ffffff;
}
body.foo .someClass {
color: #ffffff;
}
body.bar someElement {
color: #cccccc;
}
body.bar .someClass {
color: #cccccc;
}
Obviously if there were many elements and a lot of color dependent things going on, this could get big fast. Imagine 100 elements under body with three color variations as above, and you have 300+ lines of CSS, 200+ (two-thirds) of which do not apply to any one page. And this doesn't account for other changes, like background colors, etc. In such a case, it is best to set up different LESS files that import a different set of values for #base and build different style sheets to be loaded on the pages that need it. However, if you are just doing a small subset of color changes to a page, this could be a valid way to go.
There is no way to do that.
LESS has no way to know whether the selector body.foo will apply at compile time.
Basically I want a CSS selector that grabs all input[type="text"] but that also has a class "some-class".
Both of the following don't seem to be working for me:
input[type="text"] .some-class {} /* doesn't work */
.some-class input[type="text"] {} /* doesn't work */
I'm sure I'm missing something simple here.
You want input.some-class[type="text"]
.some-class input looks for input tags that are descendants of .some-class.
input.some-class does the reverse.
input[type="text"].some-class {
....
}
with no space between "input[type="text"]" and ".some-class" will work..
input[type="text"]-space in between is the problem-.some-class {}
I have a very wierd question, I dont know wether if its possible in css or not
Suppose I have say 3 different css classes as shown below, as you can see I have a common property of all these classes, I want to declare this color somewhere else and pass a reference to it here, so if next time I want to change the color I can simply change at one place rather than changing in all the 5 classes.
I know that you can use body{}, or a wrapper for this but that would affect the colors of the entire site right ? Is there a way to do this ?
Is this even possible ?
.abc {
color:red;
}
.abc2 {
color:red;
}
.abc3 {
color:red;
}
.abc4 {
color:red;
}
.abc5 {
color:red;
}
The bad news: you can't do it in CSS.
The good news: you can write in a meta-CSS language like LESS, which then processes a LESS file to pure CSS. This is called a "mixin".
In LESS:
#errorColor: red;
.error-color {
color: #errorColor;
}
#error-1 {
.error-color;
}
.all-errors {
.error-color;
}
More info: http://lesscss.org/#-mixins
if you want to declare all of them at a time, you can use:
.abc, .abc2, .abc3, .abc4, .abc5 {
color:red;
}
Or you can declare an additional class & add to all the .abc, .abc2.... & make its color:red;.
This can not be done with CSS, but that is still a very popular thing to do by using a CSS preprocessor such as LESS, SASS, SCSS, or Stylus.
A preprocessor will let you define a variable (say $red = #F00). It will replace the variable in your CSS document with the variable value for you, allowing you to write very DRY and module CSS.
This functionality is referred to as "CSS variables", which is part of the future spec, but not yet implemented on any browsers.
For now, the best way to do this in pure CSS is to declare an additional class for the desired "global", and then add that class to all relevant items.
.abc_global { color: red; }
.abc1 { /* additional styling */ }
.abc2 { /* additional styling */ }
<div class="abc1 abc_global"></div>
<div class="abc2 abc_global"></div>
With LESS
You are able to define that red color once:
.myRedColor {
color:red;
}
Now you can call that red on any CSS styles. Even NESTED styles! It's a wicked tool!
.abc1 {
.myRedColor;
}
.abc2 {
.myRedColor;
}
.abc3 {
.myRedColor;
}
.abc4 {
.myRedColor;
}
NESTED EXAMPLE:
.abc {
.itsEasyAsOneTwoThree{
.myRedColor;
}
}
Now all of our "itsEasyAsOneTwoThree" classes that are properly nested inside of an "abc" class will be assigned the red style. No more remembering those long #867530 color codes :) How cool is that?!
You can also use PostCSS with the plugin postcss-preset-env and support custom properties/variables, then use the :root selector to add global css variables.
:root {
--color-gray: #333333;
--color-white: #ffffff;
--color-black: #000000;
}