Posts

Showing posts with the label sass

Create a Function for Flexbox Layout (it will fix flexbox perfectly accross multiple rows)

Image
  In this video, we'll write a function that gives us total control over the number of flex items being displayed on one line . The function will help us display equally sized and spaced items that line up perfectly across multiple lines. Resources Function directives – Sass docs Videos CSS Flexbox Layout – course how to fix it? 1. set gutter:10px 2. set the card margin value: $gutter; 3. make a formula: g-pct: gutter percentage. g-total: gutter total. items: flexbox. per-line: in one line. 4. set _card.css, different min-width, with different flexboxes on one line. 5. check css, you will see: Now, look the browser:

Color Functions

Image
Changing or adjusting a color in your design often means having to reference your favorite graphics editor or color tool. Fortunately, Sass offers powerful color functions that make creating color palettes and changing color values in your design far simpler and more intuitive. 1. make variable color, for example: $color-accent:.... 2. refer the variable color to a selector. plus: Guil can make the color more complex color can be customed, for example: there're will be more introduction in the custom function.

Relative Paths-sass

  As we mentioned before, a path is a series of directory names, chained together with slash characters. There are two types of paths, "relative" and "absolute". In this video, we'll focus on relative paths, and we'll look at absolute paths in the next video. A  relative path  is a file path that's relative to your starting location in the file system. Suppose we want to print the contents of the  menu.txt  file in the  starbunks  directory we saw before. Previously, we changed into the  starbunks  directory to access the file, but we don't always have to do that. We can do it from another directory. Let's type our  cat  command name... And we know the  starbunks  directory is within the  mall  directory. So let's type:  mall , and then a slash:  mall/ ... Then we'll type the name of the  starbunks  directory, and another slash:  starbunks/ ... And finally we'll type the name of the file ...

directory-sass

Image
  Graphical programs like File Explorer or the Finder allow you to create, copy, move, and delete files and folders. But you can also carry out all these operations in the terminal. teacher talk a lot, I think the most important thing he didn't mentioned is: his purpose is trying to "travel" in this chart.  base on this chart, it will be easier for you to understand the whole article. and then focus on the "travel equipment" he used. (i have highlight them) Most operating systems have a concept of "folders", which group a collection of files together. Folders can also contain other folders, and those folders can contain still more folders, nested as deeply as you want. In the shell, folders are usually referred to as "directories". Folders and directories are the same thing, but the term directory dates from before modern operating systems and their "folders" metaphor. The system we're on in this workspace is set up to show us w...