IT & Software Exam > IT & Software Videos > Introduction to Software as a Service (SaaS): Beginners Guide > Sass Tutorials #22 - Installing and Using Sass Globbing
Sass Tutorials #22 - Installing and Using Sass Globbing Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
FAQs on Sass Tutorials #22 - Installing and Using Sass Globbing Video Lecture - Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
| 1. What is Sass globbing? |  |
Sass globbing is a feature in Sass that allows you to use wildcard patterns to import multiple Sass files at once. It helps to organize and manage your stylesheets more efficiently by automatically importing all files that match a specific pattern.
| 2. How do I install Sass globbing? | |
To install Sass globbing, you need to have Sass already installed on your system. Once Sass is installed, you can install Sass globbing as a separate package using npm (Node Package Manager). Run the following command in your terminal or command prompt: npm install sass-globbing
| 3. How do I use Sass globbing in my project? | |
To use Sass globbing in your project, you need to import the sass-globbing package in your main Sass file. Add the following line at the top of your Sass file: @import "sass-globbing";
Then, you can use wildcard patterns in your import statements to import multiple Sass files at once. For example, you can use the following pattern to import all Sass files in a directory: @import "partials/*.scss";
| 4. Can I use Sass globbing with partials? | |
Yes, you can use Sass globbing with partials. Partial files are Sass files that start with an underscore (_) and are not directly compiled into CSS. When using Sass globbing with partials, make sure to include the underscore in the import statement. For example, if you have a partial file named _variables.scss, you can import it using the following pattern: @import "partials/*.scss";
| 5. Are there any limitations or caveats when using Sass globbing? | |
Yes, there are a few limitations to keep in mind when using Sass globbing.
- Sass globbing does not support nested directories. It can only import files within the same directory or with a specific pattern.
- Be cautious when using wildcard patterns, as it can import unintended files if not used carefully.
- Sass globbing can slow down the compilation process if you have a large number of files to import.
- Make sure to have a clear file naming convention to avoid confusion when using Sass globbing.
Text Transcript from Video
hey what's up this is Scott with level
up Tut's and today we're gonna talk
about sass globbing and how you can
extend your sass to use some excellent
tools so this is going to be the first
extension to sass plugin that we're
going to be using and we're gonna show
you how easy it is to use and it's a
great one to start with because it
doesn't require a ton of configuration
or anything so you keep in mind that we
are going to be using compass for these
videos so I would recommend using
compass as well if you don't know how to
use compass or anything check out our
compass series you don't actually have
to know about any of the mix ins really
just have to have compass installed
because we are going to be using compass
watch to watch our files but that's no
big deal
in fact the first thing we need to do is
actually install another gem and that
gem is the sass globbing gem so I'm
gonna come to my I term and I'm gonna
type in well you might have to do sudo I
know I'm gonna have to do sudo gem
install and then it's sass - globbing
and globbing a spell GL o BB IMG just
like that so we're gonna it's gonna ask
for your password R and now this is
going to install the gem on my system
now and this is just like any other when
we installed compass or anything like
that it did it just the same as this so
we now have version 1.1 oh of sass
blobby now back to our project in our
config RB file that we created in the
last video we now have to read have a
require and then in quotes we're going
to say sass globbing so we're going to
require this extension sass globbing is
used alternatively if we were to run the
sass watch the sass you know watch
command or whatever we could actually
pass it this sass globbing there but
this is really just way more efficient I
would recommend doing it this way unless
you're really opposed to using compass
and if you know you need to use it with
just when you click sass watch then you
can always go to
there github for sass clubbing and read
the command for that so we now have sass
globbing it's required the next thing we
need to do is actually restart our
compass watch because if you're
requiring if you're making modifications
to the config dot RB you need to restart
your sass so I'm gonna do compass watch
and you know this it's watching for
changes alright the next thing we have
to do is we can actually just start
using globbing so to explain globbing a
little bit more if we were to have a
file that we wanted to use as a partial
let's make a new file and it was going
to be let's say text or let's say colors
colors s CSS and this is where we're
going to define all of our colors right
our mik are our variables for colors at
the top of our s CSS file we would have
to say import and then trim to make this
CSS syntax there we go we would have to
say import and then the name of the
partial which was colors right so now
that's that's cool right that's nice and
easy that's the way we've always done it
but what happens if we just keep
creating more of these partials we're
gonna have a ton of import statements
and that's what the problem that SAS
globbing is trying to solve so if we
create a new folder we can actually make
a folder and this is just going to be
bars right so every single let me delete
this file every single variable SAS
partial is going to be inside of this
folder and now I'm gonna create a new
file inside of here and the file is just
going to be again color stuff as CSS
because this is going to be a variable
file and then I'm going to create
another one and this is just going to be
underscore type because all of our type
related variables are going to go in
here so this is going to actually be
a we're just going to put a type related
mix in here so we're gonna say font size
and it's going to be equal to will make
this something odd and like 20 pixels
and then colors we're going to have a
color that is Rand and I have no idea
what this is I'm gonna type in a totally
random hex value here there we go we
have a random color now in my style
dotnet CSS I'm gonna have the background
be the Rand color and the font size be
the font - size now we need to adjust
this import colors because it's now
looking in the virus folder but we could
so we could say look in the bars slash
colors and do the same thing for type so
far slash type but globbing actually
makes it easy for us to say look at
everything in the virus folder so this
import statement now is going to use
this asterisk as a wild-card and say
everything that's in the virus folder
compiled into this and we just need to
finish this off with a semicolon now
you'll notice if we save this will come
and our smile that CSS has been
overwritten we come to our style that
CSS our font size is 20 pixels and our
background is the random color so
clearly worked it clearly imported
everything within this virus so what
happens if we maybe want to go another
folder deep so we want to say let's
think we have a virus folder but now we
want to have another folder and it's
going to say grit and so now these are
going to be grid specific mix-ins or
something that we're using and a new
file in here which will have as a
partial again so it starts with an
underscore and this will just be with
dot s CSS and this might be a bad
example for a file name width or
something like that but we can have
another mixin here and
just site with and it's going to be 100
pixels which is not realistic and now
we're gonna say the let's have a div
inside of here let's just say that main
and the width is going to be equal to
our I don't mean to say side sight with
right there it's going to be equal to
our site width now if we check out our
CSS file you'll see we have an undefined
variable so what this does not do is
this does not say any files folders
within VARs it's just within any files
that are within this folder so what we
can actually do is have an extra two
extras here a forward slash and then an
asterisk we can save it now let's check
our CSS it pulls in everything fine so
what this is doing is just is pulling
everything within this VARs tree
everything in the folders of it
everything in the partial files and it's
bringing them all here now we have these
files hair colors type in width they may
not be the best examples but what's
great about globbing is is it really
allows you to separate your CSS not only
in organized your CSS and not only you
know with comments and things like that
but in actual partials and files so you
can group like components together in
one partial file all of your typography
based mix-ins or anything like that can
go in one file so you can really cut
down on the length of your main
stylesheet and keep everything really
extremely organized and then it still
compiles all down into one CSS file so
when you're all done with your sass and
you're ready to go lab you don't have
all of these files so this couldn't be
any better
I love globbing I pretty much use it on
all my projects I love having several
different folders I have actually
followed the folder system from the
Omega sub theme of Drupal which includes
folders for abstractions which are like
your mix-ins
we have a base folder which you put your
base styles and
various things like Colorforms lists
media tables that sort of stuff and then
I have like a components folder which
actually has his site components
small little bits here and there so this
is our first SAS extension it's doing
some really cool stuff well the next one
we're going to talk about is going to be
singularity and it does some really cool
stuff it is a really great grid system
that allows you to build really flexible
grids to do whatever you need and it
personally I find it just great to use
so as always this is Scott with level up
touch if you have any questions or
comments please leave a come in the
video or hit us up at Twitter level of
touch we love to hear from you thanks
for watching and see you in the next one
bye
up Tut's and today we're gonna talk
about sass globbing and how you can
extend your sass to use some excellent
tools so this is going to be the first
extension to sass plugin that we're
going to be using and we're gonna show
you how easy it is to use and it's a
great one to start with because it
doesn't require a ton of configuration
or anything so you keep in mind that we
are going to be using compass for these
videos so I would recommend using
compass as well if you don't know how to
use compass or anything check out our
compass series you don't actually have
to know about any of the mix ins really
just have to have compass installed
because we are going to be using compass
watch to watch our files but that's no
big deal
in fact the first thing we need to do is
actually install another gem and that
gem is the sass globbing gem so I'm
gonna come to my I term and I'm gonna
type in well you might have to do sudo I
know I'm gonna have to do sudo gem
install and then it's sass - globbing
and globbing a spell GL o BB IMG just
like that so we're gonna it's gonna ask
for your password R and now this is
going to install the gem on my system
now and this is just like any other when
we installed compass or anything like
that it did it just the same as this so
we now have version 1.1 oh of sass
blobby now back to our project in our
config RB file that we created in the
last video we now have to read have a
require and then in quotes we're going
to say sass globbing so we're going to
require this extension sass globbing is
used alternatively if we were to run the
sass watch the sass you know watch
command or whatever we could actually
pass it this sass globbing there but
this is really just way more efficient I
would recommend doing it this way unless
you're really opposed to using compass
and if you know you need to use it with
just when you click sass watch then you
can always go to
there github for sass clubbing and read
the command for that so we now have sass
globbing it's required the next thing we
need to do is actually restart our
compass watch because if you're
requiring if you're making modifications
to the config dot RB you need to restart
your sass so I'm gonna do compass watch
and you know this it's watching for
changes alright the next thing we have
to do is we can actually just start
using globbing so to explain globbing a
little bit more if we were to have a
file that we wanted to use as a partial
let's make a new file and it was going
to be let's say text or let's say colors
colors s CSS and this is where we're
going to define all of our colors right
our mik are our variables for colors at
the top of our s CSS file we would have
to say import and then trim to make this
CSS syntax there we go we would have to
say import and then the name of the
partial which was colors right so now
that's that's cool right that's nice and
easy that's the way we've always done it
but what happens if we just keep
creating more of these partials we're
gonna have a ton of import statements
and that's what the problem that SAS
globbing is trying to solve so if we
create a new folder we can actually make
a folder and this is just going to be
bars right so every single let me delete
this file every single variable SAS
partial is going to be inside of this
folder and now I'm gonna create a new
file inside of here and the file is just
going to be again color stuff as CSS
because this is going to be a variable
file and then I'm going to create
another one and this is just going to be
underscore type because all of our type
related variables are going to go in
here so this is going to actually be
a we're just going to put a type related
mix in here so we're gonna say font size
and it's going to be equal to will make
this something odd and like 20 pixels
and then colors we're going to have a
color that is Rand and I have no idea
what this is I'm gonna type in a totally
random hex value here there we go we
have a random color now in my style
dotnet CSS I'm gonna have the background
be the Rand color and the font size be
the font - size now we need to adjust
this import colors because it's now
looking in the virus folder but we could
so we could say look in the bars slash
colors and do the same thing for type so
far slash type but globbing actually
makes it easy for us to say look at
everything in the virus folder so this
import statement now is going to use
this asterisk as a wild-card and say
everything that's in the virus folder
compiled into this and we just need to
finish this off with a semicolon now
you'll notice if we save this will come
and our smile that CSS has been
overwritten we come to our style that
CSS our font size is 20 pixels and our
background is the random color so
clearly worked it clearly imported
everything within this virus so what
happens if we maybe want to go another
folder deep so we want to say let's
think we have a virus folder but now we
want to have another folder and it's
going to say grit and so now these are
going to be grid specific mix-ins or
something that we're using and a new
file in here which will have as a
partial again so it starts with an
underscore and this will just be with
dot s CSS and this might be a bad
example for a file name width or
something like that but we can have
another mixin here and
just site with and it's going to be 100
pixels which is not realistic and now
we're gonna say the let's have a div
inside of here let's just say that main
and the width is going to be equal to
our I don't mean to say side sight with
right there it's going to be equal to
our site width now if we check out our
CSS file you'll see we have an undefined
variable so what this does not do is
this does not say any files folders
within VARs it's just within any files
that are within this folder so what we
can actually do is have an extra two
extras here a forward slash and then an
asterisk we can save it now let's check
our CSS it pulls in everything fine so
what this is doing is just is pulling
everything within this VARs tree
everything in the folders of it
everything in the partial files and it's
bringing them all here now we have these
files hair colors type in width they may
not be the best examples but what's
great about globbing is is it really
allows you to separate your CSS not only
in organized your CSS and not only you
know with comments and things like that
but in actual partials and files so you
can group like components together in
one partial file all of your typography
based mix-ins or anything like that can
go in one file so you can really cut
down on the length of your main
stylesheet and keep everything really
extremely organized and then it still
compiles all down into one CSS file so
when you're all done with your sass and
you're ready to go lab you don't have
all of these files so this couldn't be
any better
I love globbing I pretty much use it on
all my projects I love having several
different folders I have actually
followed the folder system from the
Omega sub theme of Drupal which includes
folders for abstractions which are like
your mix-ins
we have a base folder which you put your
base styles and
various things like Colorforms lists
media tables that sort of stuff and then
I have like a components folder which
actually has his site components
small little bits here and there so this
is our first SAS extension it's doing
some really cool stuff well the next one
we're going to talk about is going to be
singularity and it does some really cool
stuff it is a really great grid system
that allows you to build really flexible
grids to do whatever you need and it
personally I find it just great to use
so as always this is Scott with level up
touch if you have any questions or
comments please leave a come in the
video or hit us up at Twitter level of
touch we love to hear from you thanks
for watching and see you in the next one
bye
Related Exams
About this Video
|
4.89/5 Rating |
|
Dec 23, 2024 Last updated |
Video Description: Sass Tutorials #22 - Installing and Using Sass Globbing for IT & Software 2024 is part of Introduction to Software as a Service (SaaS): Beginners Guide preparation.
The notes and questions for Sass Tutorials #22 - Installing and Using Sass Globbing have been prepared according to the IT & Software exam syllabus.
Information about Sass Tutorials #22 - Installing and Using Sass Globbing covers all important topics for IT & Software 2024 Exam.
Find important definitions, questions, notes, meanings, examples, exercises and tests below for Sass Tutorials #22 - Installing and Using Sass Globbing.
Introduction of Sass Tutorials #22 - Installing and Using Sass Globbing in English is available as part of our Introduction to Software as a Service (SaaS): Beginners Guide for IT & Software & Sass Tutorials #22 - Installing and Using Sass Globbing in
Hindi for Introduction to Software as a Service (SaaS): Beginners Guide course. Download more important topics related with notes, lectures and mock test series for
IT & Software Exam by signing up for free.
Description
Video Lecture & Questions for Sass Tutorials #22 - Installing and Using Sass Globbing Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software - IT & Software full syllabus preparation | Free video for IT & Software exam to prepare for Introduction to Software as a Service (SaaS): Beginners Guide.
Information about Sass Tutorials #22 - Installing and Using Sass Globbing
Here you can find the meaning of Sass Tutorials #22 - Installing and Using Sass Globbing defined & explained in the simplest way possible.
Besides explaining types of Sass Tutorials #22 - Installing and Using Sass Globbing theory, EduRev gives you an ample number of questions to practice Sass Tutorials #22 - Installing and Using Sass Globbing tests,
examples and also practice IT & Software tests.
|
Explore Courses for IT & Software exam
|
|
Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
Related Searches
video lectures
,Semester Notes
,practice quizzes
,shortcuts and tricks
,Important questions
,Summary
,Free
,Sass Tutorials #22 - Installing and Using Sass Globbing Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
,mock tests for examination
,Objective type Questions
,Previous Year Questions with Solutions
,MCQs
,past year papers
,Exam
,Sample Paper
,Sass Tutorials #22 - Installing and Using Sass Globbing Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
,Extra Questions
,study material
,Sass Tutorials #22 - Installing and Using Sass Globbing Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
,Viva Questions
,ppt
;
Study Sass Tutorials #22 - Installing and Using Sass Globbing on the App
Students of IT & Software can study Sass Tutorials #22 - Installing and Using Sass Globbing alongwith tests & analysis from the EduRev app,
which will help them while preparing for their exam. Apart from the Sass Tutorials #22 - Installing and Using Sass Globbing,
students can also utilize the EduRev App for other study materials such as previous year question papers, syllabus, important questions, etc.
The EduRev App will make your learning easier as you can access it from anywhere you want.
The content of Sass Tutorials #22 - Installing and Using Sass Globbing is prepared as per the latest IT & Software syllabus.
|
© EduRev
|
Education Revolution
|
|
Signup to see your scores
go up within 7 days!
Access 1000+ FREE Docs, Videos and Tests
Takes less than 10 seconds to signup