Do CSS functions exist?
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);
}
How can you determine if a css class exists with Javascript?
This should be possible to do using the document.styleSheets[].rules[].selectorText
and document.styleSheets[].imports[].rules[].selectorText
properties. Refer to MDN documentation.
Can you use if/else conditions in CSS?
Not in the traditional sense, but you can use classes for this, if you have access to the HTML. Consider this:
<p class="normal">Text</p>
<p class="active">Text</p>
and in your CSS file:
p.normal {
background-position : 150px 8px;
}
p.active {
background-position : 4px 8px;
}
That's the CSS way to do it.
Then there are CSS preprocessors like Sass. You can use conditionals there, which'd look like this:
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
Disadvantages are, that you're bound to pre-process your stylesheets, and that the condition is evaluated at compile time, not run time.
A newer feature of CSS proper are custom properties (a.k.a. CSS variables). They are evaluated at run time (in browsers supporting them).
With them you could do something along the line:
:root {
--main-bg-color: brown;
}
.one {
background-color: var(--main-bg-color);
}
.two {
background-color: black;
}
Finally, you can preprocess your stylesheet with your favourite server-side language. If you're using PHP, serve a style.css.php
file, that looks something like this:
p {
background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}
In this case, you will however have a performance impact, since caching such a stylesheet will be difficult.
can I write a loop for css
You can't do loops with pure CSS, however, if you're using something like SASS or LESS then you can do both like:
SASS:
@for $i from 1 through 4
.#{$class-slug}-#{$i}
width: 60px + $i
LESS:
Can you do a javascript for loop inside of LESS css?
However, assuming you just want to apply the same style to each nested div
, you can just do
.containerLength > div{
float: left;
}
or perhaps create a class named .float-left
and apply it to each element you want floated right.
Using a function in Sass is returning the string containing the name of the function rather than the result
Your function doesn't exist. You must declare it (or import it from another file) before you use it. Sass does not throw errors for non-existent functions because they have a similar syntax to CSS functions. So it assumes that if it isn't a Sass function that it must be a CSS function.
Related: Test whether a Sass function is defined
Test whether a Sass function is defined
The current version of Sass has a function-exists
function. Full example:
.foo {
@if function-exists(myfunc) {
exists: true;
}
@else {
exists: false;
}
}
This is new functionality to v3.3 (March 2014), so you may need to update your Sass gem to utilize it.
Sass v3.3 adds other existence tests too:
variable-exists($name)
global-variable-exists($name)
mixin-exists($name)
More on Sass v3.3.
Related Topics
Why Doesn't Max-Width Override Min-Width
Relative Padding Is Relative to What
How to Update and Include Twitter Bootstrap 3 on Webapp or Yo Angular
How to Center One Image Over Another
Bootstrap 4 Multiple Fixed Navbars with Animated Shrink
Line Height Default Value If Font Size Is 100%
How to Float Paragraph Next to Image Without Wrapping the Image
Aligning <Li> Next to Each Other, Not Working
Disable CSS Stylesheet for a Specific Action in Symfony
How to Set Fill and Stroke Colors and Opacity on Vml Paths Using CSS
CSS Selector for First Element of Visual (Block Reflow) Row
Print Stylesheet - Converting Inputs to Text
When Should CSS Font-Family Value Use Quotes
CSS Different Border Widths Overlapping Themselves
How to Vertically Align Objects in CSS When Working with CSS Grids