So, I'm having trouble understanding the difference between commas to separate classes and the absence of them. Also, I am using 'Skeleton' style sheets for the grid system. Here's an example:
<div id="header_buttons" class="eleven columns, header_buttons">
<button type="button">Github</button>
</div>
And for 'header_buttons':
.header_buttons {
margin-left: 180px;
}
With the commas, I get my intended result:
But without them, I get this instead:
I know the basis of having multiple classes is to not use commas. But in my case, if I take them out, why do I not get my intended result?
Skeleton adds .column:first-child { margin-left: 0; }, so that rule will have higher specificity than .header_buttons { margin-left: 180px; }.
Without the comma in your markup, .column:first-child { margin-left: 0; } is applied via skeleton and overwrites .header_buttons { margin-left: 180px; }
When you add the comma there, that breaks skeleton's .column class so that rule no longer applies, and the rule you specified for .header_buttons applies.
You can see it here
.header_buttons {
margin-left: 180px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<div id="header_buttons" class="eleven columns header_buttons">
<button type="button">Github</button>
</div>
<div id="header_buttons" class="eleven columns, header_buttons">
<button type="button">Github</button>
</div>
Very new to Scss/Sass Elsewhere in my mod.scss file, have coded the style of Ul > li that I reuse quite frequently. However, in another mod.scss file, I need a change this code for a single particular instance.
Is it possible to essentially create an if-like statement that says: "If a UL/LI tag appears UNDER the .content-section class, take on behaviors X,Y and z"?
.content-section
{
margin: 40px 0px;
& .siteTitleText
{
margin-bottom: 50px;
}
& .headers
{
margin-bottom: 30px;
}
img
{
margin: 30px 0px;
}
*ul*
}
HTML:
<div class="content-section vendors">
<p class="headers">Modules, partials, and vendor</p>
<p class="bodyText">As you can see this divides my project into three basic types of files. Modules, partials, and vendored stylesheets.</p>
<ul>
<li class="bodyText">The modules directory is reserved for Sass code that doesn't cause Sass to actually output CSS. Things like mixin declarations, functions, and variables.</li>
<li class="bodyText">The partials directory is where the meat of my CSS is constructed. A lot of folks like to break their stylesheets into header, content, sidebar, and footer components (and a few others). As I'm more of a SMACSS guy myself, I like to break things down into much finer categories (typography, buttons, textboxes, selectboxes, etc…).</li>
<li class="bodyText"></li>
</ul>
</div>
Use the + in your code to select the next match below your closing tag.
Simply nest the tags if you wish to select the child tag inside your .content-section.
Reference: w3 documentation
.content-section {
margin: 40px 0px;
& .siteTitleText {
margin-bottom: 50px;
}
& .headers {
margin-bottom: 30px;
}
img {
margin: 30px 0px;
}
ul, li { // If .content-section has a child named ul or li, do this:
margin: 100px;
}
}
I'm just curious to know if it is possible to have specific stylings based on the name of of a class.
For example, Bootstrap 4 has a helper class for margins and padding like:
<div class="m-t-1 p-a-0"></div>
This gives the div 1em of margin to the top, and removes padding from all sides.
I am sure they have pre-styled this class in their CSS to achieve this.
But I am curious if there is a way to use the class as a variable.
for example:
<div class="fs-x"></div>
where x can be any number, this class would then give the styling the font-size: x to the div.
Is this possible to do?
Thanks.
You can use a CSS pre-processor such as SASS or LESS to achieve this however it generates static classes within a specified range below is an example from the SASS documentation:
$class-slug: for !default
#for $i from 1 through 4
.#{$class-slug}-#{$i}
width: 60px + $i
Which emits this CSS:
.for-1 {
width: 61px;
}
.for-2 {
width: 62px;
}
.for-3 {
width: 63px;
}
.for-4 {
width: 64px;
}
All CSS classes must be explicitly defined. So every variation if X would need to exist in a .css file
you can use constant in css for example
$x = 10px;
img{
margin-bottom : $x;
}
but however you can declare variables with this way
:root {
--color-principal: #06c;
}
#foo h1 {
color: var(--color-principal);
}
Consider this:
.voffset1 { margin-top: 1px; }
.voffset2 { margin-top: 2px; }
.voffset3 { margin-top: 3px; }
......
.voffset100 { margin-top: 100px; }
Is it possible to turn this into a function in CSS or CSS3
so I don't have to manually have 100 css classes, but
just have 1 css 'function' for it?
like below:
.voffset:(n) {margin-top : (n)px;}
if not, can we do better than writing 100 lines?
I prefer not using scss or any variants.
Sure.
<div style="margin-top:1px">
When your CSS is so obviously redundant, just use inline styles.
Or redesign your code to actually use classes properly.
Are there any useful techniques for reducing the repetition of constants in a CSS file?
(For example, a bunch of different selectors which should all apply the same colour, or the same font size)?
Recently, variables have been added to the official CSS specs.
Variables allow you to so something like this :
body, html {
margin: 0;
height: 100%;
}
.theme-default {
--page-background-color: #cec;
--page-color: #333;
--button-border-width: 1px;
--button-border-color: #333;
--button-background-color: #f55;
--button-color: #fff;
--gutter-width: 1em;
float: left;
height: 100%;
width: 100%;
background-color: var(--page-background-color);
color: var(--page-color);
}
button {
background-color: var(--button-background-color);
color: var(--button-color);
border-color: var(--button-border-color);
border-width: var(--button-border-width);
}
.pad-box {
padding: var(--gutter-width);
}
<div class="theme-default">
<div class="pad-box">
<p>
This is a test
</p>
<button>
Themed button
</button>
</div>
</div>
Unfortunately, browser support is still very poor. According to CanIUse, the only browsers that support this feature today (march 9th, 2016), are Firefox 43+, Chrome 49+, Safari 9.1+ and iOS Safari 9.3+ :
Alternatives :
Until CSS variables are widely supported, you could consider using a CSS pre-processor language like Less or Sass.
CSS pre-processors wouldn't just allow you to use variables, but pretty much allow you to do anything you can do with a programming language.
For example, in Sass, you could create a function like this :
#function exponent($base, $exponent) {
$value: $base;
#if $exponent > 1 {
#for $i from 2 through $exponent {
$value: $value * $base;
}
}
#if $exponent < 1 {
#for $i from 0 through -$exponent {
$value: $value / $base;
}
}
#return $value;
}
Elements can belong to more than one class, so you can do something like this:
.DefaultBackColor
{
background-color: #123456;
}
.SomeOtherStyle
{
//other stuff here
}
.DefaultForeColor
{
color:#654321;
}
And then in the content portion somewhere:
<div class="DefaultBackColor SomeOtherStyle DefaultForeColor">Your content</div>
The weaknesses here are that it gets pretty wordy in the body and you're unlikely to be able to get it down to listing a color only once. But you might be able to do it only two or three times and you can group those colors together, perhaps in their own sheet. Now when you want to change the color scheme they're all together and the change is pretty simple.
But, yeah, my biggest complain with CSS is the inability to define your own constants.
You should comma seperate each id or class for example:
h1,h2 {
color: #fff;
}
You can use global variables to avoid duplicacy.
p{
background-color: #ccc;
}
h1{
background-color: #ccc;
}
Here, you can initialize a global variable in :root pseudo class selector. :root is top level of the DOM.
:root{
--main--color: #ccc;
}
p{
background-color: var(--main-color);
}
h1{
background-color: var(--main-color);
}
NOTE: This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes. More Info here
However, you can always use the Syntactically Awesome Style Sheets i.e.
In case Sass, you have to use $variable_name at the top to initialize the global variable.
$base : #ccc;
p{
background-color: $base;
}
h1{
background-color: $base;
}
You can use dynamic css frameworks like less.
Personally, I just use comma-separed selector, but there some solution for writing css programmatically. Maybe this is a little overkill for you simpler needs, but take a look at CleverCSS (Python)
Try Global variables to avoid duplicate coding
h1 {
color: red;
}
p {
font-weight: bold;
}
Or you can create different classes
.deflt-color {
color: green;
}
.dflt-nrml-font {
font-size: 12px;
}
.dflt-header-font {
font-size: 18px;
}
As far as I know, without programmatically generating the CSS file, there's no way to, say, define your favorite shade of blue (#E0EAF1) in one and only one spot.
You could pretty easily write a computer program to generate the file. Execute a simple find-and-replace operation and then save as a .css file.
Go from this source.css…
h1,h2 {
color: %%YOURFAVORITECOLOR%%;
}
div.something {
border-color: %%YOURFAVORITECOLOR%%;
}
to this target.css…
h1,h2 {
color: #E0EAF1;
}
div.something {
border-color: #E0EAF1;
}
with code like this… (VB.NET)
Dim CssText As String = System.IO.File.ReadAllText("C:\source.css")
CssText = CssText.Replace("%%YOURFAVORITECOLOR%%", "#E0EAF1")
System.IO.File.WriteAllText("C:\target.css", CssText)
You can use multiple inheritance in your html elements (e.g. <div class="one two">) but I'm not aware of a way of having constants in the CSS files themselves.
This link (the first found when googling your question) seems to have a fairly indepth look at the issue:
http://icant.co.uk/articles/cssconstants/
CSS Variables, if it ever becomes implemented in all major browsers, may one day resolve this issue.
Until then, you'll either have to copy and paste, or use a preprocessor of whatever sort, like others have suggested (typically using server-sider scripting).
:root {
--primary-color: red;
}
p {
color: var(--primary-color);
}
<p> some red text </p>
You can change color by JS
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
document.documentElement.style.setProperty('--primary-color', 'blue');