Is there any way to #import a file and make all the classe it contains abstract ?
Let me show an example to explain :
#import "bootstrap"; //Do something magic to make all classes abstract
.my-bem__custom{
#extend .btn
}
It should output a css file this way :
//Not any bootstrap stuff here
.my-bem__custom {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
No. Sass has nothing like that. If it did, it would be referenced in the documentation.
Related
We need to declare the top margin for .Article-UnorderedList when it goes after .Article-Paragraph.
We can write selector .Article-Paragraph+.Article-UnorderedList, but it is not suites with below code (in comments, I wrote why).
.Article
&-Paragraph
font-size: 16px
line-height: 18px
// In this line, we don't not know about ".Article-UnorderedList" yet.
// There could be a lot of unknown at advance selectors like ".Article-UnorderedList" below.
// So, we can't write "&.+Article-UnorderedList" here.
// Article-UnorderedList declaration begins here. Now we know about it and also about ".Article-Paragraph"
// So, this selector MUST know how to shift from ".Article-Paragraph"
&-UnorderedList
list-style-type: disc
list-style-position: outside
padding-left: 20px
>li
line-height: 18px
&:not(:first-child)
margin-top: 4px
// We need to declare the margin from .Article-Paragraph
// Some way to create .Article-Paragraph+.Article-UnorderedList HERE?
// Works but lame: we need to exit from &-UnorderedList level and re-declare styles
// for .Article-Paragraph
&-Paragraph+.Article-UnorderedList
margin-top: 16px
You could set a global variable in your parent selector and then use it in your UnorderedList element.
.Article
&-Paragraph
$parent: & !global
font-size: 16px
line-height: 18px
&-UnorderedList
list-style-type: disc
list-style-position: outside
padding-left: 20px
>li
line-height: 18px
&:not(:first-child)
margin-top: 4px
#{$parent} + &
margin-top: 16px
Your result:
.Article-Paragraph {
font-size: 16px;
line-height: 18px;
}
.Article-UnorderedList {
list-style-type: disc;
list-style-position: outside;
padding-left: 20px;
}
.Article-UnorderedList > li {
line-height: 18px;
}
.Article-UnorderedList > li:not(:first-child) {
margin-top: 4px;
}
.Article-Paragraph + .Article-UnorderedList {
margin-top: 16px;
}
#mixin search-box{
padding: 5px 0px 5px 0px;
border: 2px solid lightseagreen;
width:100%;
outline: none;
border-radius: 5px;
color:$color;
font-family: $myFont;
font-size: 23px;
}
.search-container{
background:lightcyan;
margin: 5px auto;
width:30%;
#include: search-box;
}
Here I am using mixins in scss.
But it is giving me error identifier expectedscss(css-identifierexpected)
Please have a look.
#include is used like
#include <name>
So your styles would look like
#mixin search-box {
padding: 5px 0px 5px 0px;
border: 2px solid lightseagreen;
width: 100%;
outline: none;
border-radius: 5px;
color: $color;
font-family: $myFont;
font-size: 23px;
}
.search-container {
background: lightcyan;
margin: 5px auto;
width: 30%;
#include search-box;
}
#import '_colors.scss';
#import '_fonts.scss';
#import '_urls.scss';
#import '_mixins.scss';
html, body
height: 100%
body
display: grid
font-family: $clickme, $clickme-fallback;
color: $color;
a
text-decoration: none;
color: inherit;
.cta
position: relative;
margin: auto;
padding: 19px 22px;
transition: all .2s ease;
&:before
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 28px;
background: rgba($primary,.5);
width: 56px;
height: 56px;
transition: all .3s ease;
span
position: relative;
font-size: 16px;
line-height: 18px;
font-weight: 900;
letter-spacing: .25em;
text-transform: uppercase;
vertical-align: middle;
svg
position: relative;
top: 0;
margin-left: 10px;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke: $color;
stroke-width: 2;
transform: translateX(-5px);
transition: all .3s ease;
&:hover
&:before
width: 100%;
background: rgba($primary,1);
svg
transform: translateX(0);
&:active
transform: scale(.96);
I am trying to get to compile without any error codes and it appears that after several attempts it is not working I have tried several different methods and error codes keep appearing that no valid css is after every line will some one please help this is a final project and I need help getting it ready by monday night.
First of all remove .scss from the import statements.
If your file has .scss extension then you have to use brackets and semi colons but if it has .sass extensoon then you have to remove these semi colons
Then compile your file to css with any software like prepros or use to the sass command line.
Remember to link the css file to your html document.
Hope that it works
What is the proper way to create a fluid row with Foundation 6 and scss? Currently I am doing it by setting $width: none, but I'm not sure if this is correct:
.topBanner {
#include grid-row($width: none);
background-color: $secondary-color;
padding: 5px;
text-align: center;
}
The produced CSS from this is:
.topBanner {
max-width: none;
margin-left: auto;
margin-right: auto;
margin: 0;
list-style-type: none;
background-color: #4990E2;
padding: 5px;
text-align: center;
}
I have the following code for my webpage, and when I use it in Chrome every thing is fine, but when I use it in Firefox the style is changed.
I need to make the Firefox style same like Chrome style, so any suggestion for that?
I mention in the code below what I tried to do.
<html>
<head>
<style>
div
{
background-color: #FFFFFF;
border: 1px solid #86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin: 10px;
padding: 5px 5px;
text-decoration: none;
direction:rtl;
border-radius: 8px;
}
a
{
background-color: #FFFFFF;
color: 2F62AC;
font-size: 17px;
font-weight: bold;
text-decoration: none;
direction:rtl;
position: relative;
border-radius: 8px;
border: none;
padding: 12px 10px;
text-align: center;
}
a.option1
{
//Not centered but filled all area
display: flex;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
a.option2
{
//Not centered and not filled all area
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center; */
}
a:active, a:hover {
background-color: #2F62AC;
color: #FFFFFF;
}
</style>
</head>
<body>
<div><a class="option1" href="#">Option 1</a></div>
<div><a class="option2" href="#">Option 2</a></div>
</body>
</html>
Best regards.
You do not need Flexbox for this purpose: just display: block on your anchor:
http://cssdeck.com/labs/ocotcmpf
div
{
background-color: #FFFFFF;
border: 1px solid #86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin: 10px;
padding: 5px 5px;
text-decoration: none;
direction:rtl;
border-radius: 8px;
}
a
{
background-color: #FFFFFF;
color: 2F62AC;
font-size: 17px;
font-weight: bold;
text-decoration: none;
direction:rtl;
position: relative;
border-radius: 8px;
border: none;
padding: 12px 10px;
text-align: center;
display: block; /* here */
}
a:active, a:hover {
background-color: #2F62AC;
color: #FFFFFF;
}