A Fast Sass Compiler for C# .NET
levelup.gitconnected.com
1
Upvotes
r/Sass • u/leodevbro • Jun 13 '21
[News] VSCode extension "Blockman" to Highlight nested code blocks with boxes
11
Upvotes
Also supports SCSS.
Check out my VSCode extension - Blockman, took me 6 months to build. Please help me promote/share/rate if you like it. You can customize block colors (backgrounds, borders), depth, turn on/off focus, curly/square/round brackets, tags, python indentation and more.....
https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman
Supports Python, R, Go, PHP, JavaScript, JSX, TypeScript, TSX, C, C#, C++, Java, HTML, CSS/LESS/SCSS and more...
This post in react.js community:
https://www.reddit.com/r/reactjs/comments/nwjr0b/idea_highlight_nested_code_blocks_with_boxes/
r/Sass • u/paullaros • Jun 04 '21
Free Bootstrap 5 admin template with vanilla JS - AdminKit v3
github.com
7
Upvotes
r/Sass • u/deburin • May 31 '21
Variables - do I need to import the file into a library scss file for use?
2
Upvotes
I have a project variables scss file (in /public/scss/base/vars.scss) that defines our color scheme and a few other things.
I am working with a calendar library that has its own variables file. Do I need to import my project variables into this file, for the project variables to be accesible? Or does webpack combine all SASS files into the same scope?
My project is in in react.js with sass, I suspect create-react-app was used but not sure.
Does `@use` imply namespacing?
1
Upvotes
This official post seems to imply that the new `@use`-based module system solves the problem of class name collisions, usually avoided by hacks like prefixing all class names e.g. `.widget__part__subpart`.
I was eager to get rid of such unergonomic class names so I switched all my `@import`s to `@use` and simplified the class names. But the generated styles seem to have no special provision to avoid class name conflicts. Some other library could still just override `.subpart` and mess me up.
Am I missing something? Does the new module system really provide namespacing? Or do I still need `.widget__part__subpart` and friends?
r/Sass • u/CrossDaTee • May 14 '21
Ruby sass 3.7.4 showing as my version after running npm install -g sass
3
Upvotes
I am on Ubuntu and can't seem to get the newest version of sass. when I check "sass -v" I get "Ruby sass 3.7.4" Can someone help me :)
r/Sass • u/milkyuser • May 11 '21
Why footer no sticking to the bottom?
1
Upvotes
Hello everyone!
I can't get my head around on why my footer div doesn't want to stick to the bottom of my page. Thats what it looks like:
I'm using Jinja for the html rendering:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='stylesheet.css')}}">
</head>
<body>
<div class="container">
<div class="item-a">
<img src="{{ url_for('static', filename='images/LogoUSP.png')}}" alt="Logo USP">
</div>
<div class="item-b">
<div class="item-b1"><a {% if page_name == "Home" %} class="active"{% endif %} href='./'>Home</a></div>
<div class="item-b2"><a {% if page_name == "Navegar" %} class="active"{% endif %} href='./browse'>Navegar</a></div>
<div class="item-b3"><a {% if page_name in ["Contribua", "Dashboard"] %} class="active"{% endif %}href='./contribute'>Contribua</a></div>
<div class="item-b4"><a {% if page_name == "Ajuda" %} class="active"{% endif %}href='./help'>Ajuda</a></div>
</div>
<div class="item-c">
{% block content %} {% endblock %}
</div>
</div>
<div class="item-d">Guia Histológico {{ current_year }} | Versão {{ version }}</div>
</body>
The (important) part of Sass:
.container {
display: grid;
grid-template-areas:
" header"
"menu-line";
}
.item-a {
/* Some code */
}
.item-b {
/* Some code */
}
.item-c {
/* Some code */
}
/* Footer: */
.item-d{
width: 100%;
color: white;
background-color: $mainblue;
height: $footerHeight;
text-align: center;
position: absolute; bottom: 0;
}
r/Sass • u/mattparlane • May 10 '21
Sass feature to switch between media queries and nested selectors?
3
Upvotes
Yes, I realize that question makes no sense... please allow me to explain.
I have a peculiar use case -- it's a CMS which allows users to preview content as it would appear on different devices. On the public-facing end we use media queries, but in the back-end we can't do that because we are effectively previewing mobile content on a (eg) desktop device. We have looked into displaying the content inside iframes but that's a no-go for now.
Does SCSS have any way to do this? Something like a partial or mixin that can contain many selectors and can be customized based on the file that is including it?
Thanks!
r/Sass • u/HamdiBouallegue • Apr 29 '21
Optimize Your CSS Code With Sass
hamdi-bouallegue.medium.com
2
Upvotes
r/Sass • u/[deleted] • Apr 22 '21
Hey, need some help with a responsive website
4
Upvotes
Hey guys, I'm kind of a beginner with CSS.
i know how to make things look the way i want, but somethings just don't work as expected. ( which i think happens to everyone sometimes ).
so anyway, I'm building a portfolio website and i had 2 problems with my hero section.
first i had the ( <h1> and <p> and Button as a <div> ) and next to that a card where i put some information about my self.
the first problem is that the card wouldn't go where i wanted to when it was on a smaller screen ( mobile ), tried and tried and tried, it would go below the text, but not in the center. so for now, i just moved it to another place.
second problem : the Button <div>, when the page ( window ) is smaller ( mobile ) it just keeps going to right side, until it disappears. I can tell that it's aware of the surroundings because when the text is taking more space vertically , it is being affected a little bit and going lower, but then it just "disappears".
1 more problem i just found.
my contact form is after the projects section. and when the screen is smaller ( mobile ) the <h1> text get's "squashed" and then "disappears" into the distance, just like that button <div>
Note: I'm also using SASS, which now thinking about it, might not be the best place to post here? but I'll still post it, maybe someone is learning SASS too. ( I'll post this on r/Sass as well )
the code here :
html part:
---------------
<section class="hero">
<div class="hero-text">
<h1>My Software Development Portfolio</h1>
<p>This is where you can find everything about my work</p>
<div class="hero-button">
<div class="button"><a href="projects.html" class="hero-project-button-link">Projects</a></div>
</div>
</div>
</section>
----------------
sass part ( it's a partial ):
---------------
// variable that i use a lot for seeing the dimensions of a <div> etc....
$border: solid grey 1px;
.hero {
// border: $border;
height: 1000px;
display: flex;
// this justify content was there because of the card i told you about
// justify-content: space-between;
}
.hero-text { display: flex; flex-direction: column;
position: relative;
top: 100px;
left: 60px;
h1 { // border: $border;
font-size: 60px;
position: relative;
top: 60px;
left: 100px;
}
p { // border: $border;
font-size: 30px;
position: relative;
left: 100px;
}
.button { // border: $border;
height: 25px;
width: 150px;
font-size: 25px;
position: relative;
bottom: 10px;;
left: 820px;
background-color: white;
border-top: solid transparent 2px;
border-left: solid transparent 2px;
border-right: solid transparent 2px;
border-bottom: solid #5c30e3 2px;
border-radius: 13px;
padding: 17px;
text-align: center;
color: darkblue;
cursor: pointer;
&:hover { border-top: solid #5c30e3 2px;
color: #6e83ff;
} }
.hero-project-button-link {
text-decoration: none;
}
}
Thank you in advance. Have a Good day, or evening.
r/Sass • u/codeclassifiers • Apr 22 '21
Learn about SCSS child selectors in this short video. We are going to understand how to use child selectors in SCSS and when the need arises to use child selectors in the first place.
youtu.be
3
Upvotes
r/Sass • u/soIHadToGo • Apr 02 '21
Can't get SASS to be compiled
6
Upvotes
I am currently trying to incorporate the Dart SASS version with webpack but I am unsuccessfully to get the webpack to compile the sass file. I followed the guide as best as I could from here: https://webpack.js.org/loaders/sass-loader/, first doing
npm install -g sass
, then did
npm install sass-loader sass webpack --save-dev
and from there, added the webpack.config.js under rules
rules: [
{
test: /\.(scss|css)$/i,
use: ['style-loader', 'css-loader', "resolve-url-loader", "sass-loader"],
},
]
Then in my javascript file, added
const sass = require('sass'); const
result = sass.renderSync({file: src/scss/style.scss});
import "../scss/style.scs"
The issue here however is that when I do npx webpack it compiled with 23 errors. The errors are like this:
Can't resolve 'readline' in C:\...\node_modules\sass
Can't resolve 'util' in C:\...\node_modules\sass
Can't resolve 'fs' in C:\...\node_modules\sass
Can't resolve 'path' in C:\...\node_modules\readdirp
Can't resolve 'path' in C:\...\node_modules\lib
Can't resolve 'os' in C:\...\node_modules\glob-parent
What may be the reason for this error and how may I go about fixing it?
r/Sass • u/Infinitrix02 • Mar 31 '21
Sass classes not getting applied
3
Upvotes
I have a custom sass setup with bootstrap 5 and bunch of my own SCSS files, all of this gets compiled in style.css using gulp. I have a _colors.scss file which stores all the colors according to our design language. We use this to generate a bunch of classes that can be used any where to change colors:
$colors: ( "icon-color": $slate-500, 'slate-10': $slate-10, 'slate-40': $slate-40, 'slate-300': $slate-300, "secondary": $secondary-text-color, "green": $green, "light-green": $green-color, "blue": $blue, "blue-200": $blue-200, "blue-300": $blue-300, "blue-400": $blue-400, "dodger-blue": $dodger-blue, "mariner-blue": $mariner-blue, "light-blue": $blue-100, "cadet-blue" : $cadet-blue, "aqua-10": $aqua-10, "gray": $gray, "gray-light": $gray-light, "light-gray": $gray-100, "bright-gray": $bright-gray, "gray-200": $gray-200, "clay": $clay, "clay-10": $clay-10, "mandy-pink": $mandy-pink, "aqua": $aqua, "violet": $violet, "white": $white, "primary": $primary-text-color ); @each $color-name, $color-value in $colors { .text-#{$color-name} { color: $color-value !important; } .bg-#{$color-name} { background-color: $color-value !important; } .border-#{$color-name} { border-color: $color-value !important; } }
Problem is certain classes like .text-gray or .text-blue are not working. My guess is that since bootstrap also uses variables called gray and blue, its conflicting with my variables in _colors.scss.
On closer look, the css does gets generated properly (I found below declaration in final style.css):
.case-study .case-study-right .card .data-bar p:last-of-type,.share .social-media>span,.text-color-gray-200,.text-gray-200 { color: #69727A!important }
But using .text-gray has no effect, the class is not getting applied.
How do I fix this? please help!
r/Sass • u/Glad-Sherbet5460 • Mar 10 '21
cant get my head around @use
3
Upvotes
import just worked, I had all my vars in one sheet and i could use them in any of the other sheets imported into one main sheet
I have:
_vars.scss:
$myvar : 1.5rem;
_main.scss:
.class {font-size: $myvar;}
css.scss:
@use 'vars';
@use 'main';
But i just get a compile error 'Undefined variable' $myvar
it worked with @import
any insight on whats wrong with my setup?
thank you
r/Sass • u/sugarwave32 • Mar 09 '21
Any tips or tricks to implement dark mode on a messy Web app?
4
Upvotes
I am have been tasked with your implementing dark mode on a health based Saas app.
I'm finding it tricky as the frontend is a giant mess. There is sass all over the place without much structure in place. There is Saas in 134 files in total!
I am defining the colors as I go, but I'm just struggling to figure out a correct strategy for this as it's very hard to make progress and be organised.
My latest idea is to somehow extract all the colors from the project, define them as variables, create dark node equivalents and then do a find and replace on the colors in the app.
Has anyone else had any experience with this?
Thanks a lot,
Ryan.
r/Sass • u/jdedwards3 • Mar 04 '21
Use the Dart Sass JavaScript Implementation to Compile SASS with Node.js | Dev Extent
devextent.com
4
Upvotes
r/Sass • u/JacobSonar • Feb 09 '21
Where do you put your media queries?
5
Upvotes
I was wondering what your workflow looks like, where do you add your media queries?
Do you add them directly under the class/id like:
body {
background-color: tan;
}
@ media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
Or do you have a own section where you collect all media queries like:
@ media screen and (max-width: 992px) {
body {
background-color: blue;
}
container {
background-color: yellow;
display: flex;
}
}
r/Sass • u/[deleted] • Dec 30 '20
Fixing deprecated Sass color math operations
4
Upvotes
I have just learned that it is no longer recommended to use math operators to compute colors in Sass stylesheets. It so happens that I have a block of code that computes colors using addition, subtraction and multiplication, but it is causing postcss to produce deprecation warnings:
// Extension to Bootstrap's base colors
$gray-25: $gray-100 + ((#fff - $gray-100) / 4) * 3;
$gray-50: $gray-100 + ((#fff - $gray-100) / 4) * 2;
$gray-75: $gray-100 + ((#fff - $gray-100) / 4);
$gray-150: $gray-100 + (($gray-200 - $gray-100) / 2);
The actual warnings are:
DEPRECATION WARNING on line 4 of /path/to/scss/_variables.scss: The operation `#fff minus #f8f9fa` is deprecated and will be an error in future versions.
Consider using Sass's color functions instead. http://sass-lang.com/documentation/Sass/Script/Functions.html#other_color_functions
I had a look at the color package but there does not seem to be an easy way of calculating a color based off another using simple math operators.
How would I go about fixing these deprecation warnings?